@charset "UTF-8";

@media all {
	/* CSS Variablen, die überschrieben werden können */
	:root {
		/* Farben der Ladeanimation */
		--chatbot-loading-color: #000000;

		/* Farben der Fragen des Benutzers */
		--chatbot-user-color: #ffffff;
		--chatbot-user-background: #343a40;

		/* Farben der Antworten des Chatbots */
		--chatbot-assistant-color: #212529;
		--chatbot-assistant-background: #ffffff;
	}

	/* Ladeanimation */
	#chatbot-messages[data-loading="container"]::after,
	#chatbot-messages[data-loading="message"] .message-body.loading::after {
		content: '';
		display: block;
		width: 50px;
		height: 50px;
		background:
			no-repeat linear-gradient(var(--chatbot-loading-color) 0 0) 0 50%,
			no-repeat linear-gradient(var(--chatbot-loading-color) 0 0) 50% 50%,
			no-repeat linear-gradient(var(--chatbot-loading-color) 0 0) 100% 50%;
		position: relative;
		z-index: 2;
		opacity: 0.8;
		margin: 1rem 0 2rem calc(50% - 25px);
		pointer-events: none;
		animation: chatbot-loading 1s infinite linear forwards;
	}

	@keyframes chatbot-loading {
		0% { background-size: 20% 50% ,20% 50% ,20% 50%; }
		20% { background-size: 20% 20% ,20% 50% ,20% 50%; }
		40% { background-size: 20% 100%,20% 20% ,20% 50%; }
		60% { background-size: 20% 50% ,20% 100%,20% 20%; }
		80% { background-size: 20% 50% ,20% 50% ,20% 100%; }
		100% { background-size: 20% 50% ,20% 50% ,20% 50%; }
	}

	/* Wartenmeldungen */
	.waiting-message {
		width: fit-content;
		margin: auto;
		font-size: 0.75rem;
		font-style: italic;
	}

	/* Während eine Nachricht vom Chatbot lädt, wird ein Fade-Effekt am unteren Rand angezeigt */
	#chatbot-messages[data-loading="message"] article[data-role="assistant"] .message-body.loading::before {
		content: '';
		display: block;
		width: 100%;
		height: 3rem;
		background-image: linear-gradient(transparent -1rem, var(--chatbot-assistant-background));
		position: absolute;
		z-index: 1;
		left: 0;
		bottom: calc(50px + 1rem);
	}

	/* Streaming-Effekt */
	#chatbot-messages[data-loading="message"] article[data-role="assistant"] .message-body.loading > :not(ol):not(ul):not(pre):not(div):last-child:after,
	#chatbot-messages[data-loading="message"] article[data-role="assistant"] .message-body.loading > pre:last-child code:after,
	#chatbot-messages[data-loading="message"] article[data-role="assistant"] .message-body.loading > :is(ul, ol):last-child > li:last-child:not(:has(* > li)):after,
	#chatbot-messages[data-loading="message"] article[data-role="assistant"] .message-body.loading > :is(ul, ol):last-child > li:last-child > :is(ul, ol):last-child > li:last-child:not(:has(* > li)):after,
	#chatbot-messages[data-loading="message"] article[data-role="assistant"] .message-body.loading > :is(ul, ol):last-child > li:last-child > :is(ul, ol):last-child > li:last-child > :is(ul, ol):last-child > li:last-child:after {
		content: '\25cf';
		font-family: Circle, system-ui, sans-serif;
		line-height: normal;
		vertical-align: baseline;
		margin-left: 0.25rem;
		animation: chatbot-streaming 0.5s infinite 1s linear alternate;
	}

	[dir="rtl"] #chatbot-messages[data-loading="message"] article[data-role="assistant"] .message-body.loading > :is(ul, ol):last-child > li:last-child:not(:has(* > li)):after,
	[dir="rtl"] #chatbot-messages[data-loading="message"] article[data-role="assistant"] .message-body.loading > :is(ul, ol):last-child > li:last-child > :is(ul, ol):last-child > li:last-child:not(:has(* > li)):after,
	[dir="rtl"] #chatbot-messages[data-loading="message"] article[data-role="assistant"] .message-body.loading > :is(ul, ol):last-child > li:last-child > :is(ul, ol):last-child > li:last-child > :is(ul, ol):last-child > li:last-child:after {
		margin-right: 0.25rem;
	}

	@keyframes chatbot-streaming {
		0% { opacity: 1; }
		100% { opacity: 0; }
	}

	/* Die Darstellung der Ladeanimation in einer Nachricht anpassen */
	#chatbot-messages[data-loading="message"] .message-body.loading::after {
		margin-bottom: 0;
	}

	/* Darstellung der Formular Elemente */
	#chatbot-search,
	#chatbot-respond {
		display: flex;
		column-gap: 0.5rem;
	}

	form[name="chatbot"] .hidden {
		display: none !important;
	}

	form[name="chatbot"] input[name="query"],
	form[name="chatbot"] input[name="response"] {
		width: 100%;
	}

	form[name="chatbot"] button {
		white-space: nowrap;
	}

	form[name="chatbot"] input:not([type="checkbox"]),
	form[name="chatbot"] select,
	form[name="chatbot"] button {
		height: calc(2.25rem + 2px);
		padding: 0 0.5rem;
	}

	#chatbot-search [data-tool="audio-toggle"],
	#chatbot-respond [data-tool="audio-toggle"] {
		opacity: 0.4;
		cursor: pointer;
		font-size: 1.5rem;
	}

	#chatbot-search [data-tool="audio-toggle"]:hover,
	#chatbot-search [data-tool="audio-toggle"].active,
	#chatbot-respond [data-tool="audio-toggle"]:hover,
	#chatbot-respond [data-tool="audio-toggle"].active {
		opacity: 1;
	}

	#chatbot-search [data-tool="audio-toggle"].disabled,
	#chatbot-search [data-tool="audio-toggle"].disabled:hover,
	#chatbot-respond [data-tool="audio-toggle"].disabled,
	#chatbot-respond [data-tool="audio-toggle"].disabled:hover {
		opacity: 0.4;
		pointer-events: none;
	}

	#chatbot-search [data-tool="audio-toggle"]::before,
	#chatbot-respond [data-tool="audio-toggle"]::before {
		content: '\1f3a4';
	}

	/* Abstand aller Nachrichten nach oben zum eigentlichen Formular */
	#chatbot-messages {
		margin-top: 1rem;
	}

	/* Die Schaltfläche um die Unterhaltung fortzuführen, nur anzeigen, wenn es mindestens eine Nachricht gibt */
	#chatbot-messages:empty ~ #chatbot-respond {
		display: none;
	}

	/* Allgemeine Darstellung der Fragen und Antworten */
	#chatbot-messages article {
		opacity: 0;
		animation: chatbot-article 0.5s linear forwards;
	}

	@keyframes chatbot-article {
		to { opacity: 1; }
	}

	/* Allgemeine Darstellung von Fragen und Antworten */
	#chatbot-messages article .message-body {
		border-radius: 0.25rem;
		padding: 1rem;
		margin-bottom: 1rem;
		position: relative;
	}

	#chatbot-messages article .message-body > .message-completed:not(:empty):not(:last-of-type) {
		margin-bottom: inherit;
	}

	/* Darstellung der Fragen vom Benutzer */
	#chatbot-messages article[data-role="user"] {
		margin-right: 6rem;
	}

	#chatbot-messages article[data-role="user"] .message-body {
		color: var(--chatbot-user-color);
		background-color: var(--chatbot-user-background);
	}

	/* Darstellung der Antworten vom Chatbot */
	#chatbot-messages article[data-role="assistant"] {
		margin-left: 6rem;
	}

	#chatbot-messages article[data-role="assistant"] .message-body {
		color: var(--chatbot-assistant-color);
		background-color: var(--chatbot-assistant-background);
		border: 1px solid var(--chatbot-user-background);
	}

	/* Während die Antwort des Chatbots generiert wird, einen farbigen Rahmen anzeigen */
	#chatbot-messages article[data-role="assistant"] .message-body.loading {
		--chatbot-angle: 0deg;
		border-color: transparent;
		background-image: linear-gradient(var(--chatbot-assistant-background), var(--chatbot-assistant-background)),
			conic-gradient(from var(--chatbot-angle), red, yellow, lime, aqua, blue, magenta, red);
		background-origin: border-box;
		background-clip: padding-box, border-box;
		box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
		animation: 10s chatbot-message-loading linear infinite;
	}

	@keyframes chatbot-message-loading {
		to {
			--chatbot-angle: 360deg;
		}
	}

	@property --chatbot-angle {
		syntax: '<angle>';
		initial-value: 0deg;
		inherits: false;
	}

	/* Darstellung der Quellen und Werkzeuge */
	#chatbot-messages article .message-footer {
		display: flex;
		justify-content: space-between;
		margin-bottom: 1rem;
	}

	#chatbot-messages[data-loading] article[data-role="assistant"]:last-of-type .message-footer {
		display: none;
	}

	/* Darstellung der Quellen */
	#chatbot-messages article details {
		font-size: 9pt;
		margin-bottom: 1rem;
	}

	#chatbot-messages article details summary {
		cursor: pointer;
	}

	/* Darstellung der Werkzeuge */
	#chatbot-messages article .message-tools {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 1.25rem;
		gap: 1rem;
	}

	#chatbot-messages article .message-tools [data-tool] {
		opacity: 0.4;
		cursor: pointer;
	}

	#chatbot-messages article .message-tools [data-tool].hidden {
		visibility: hidden;
	}

	#chatbot-messages article .message-tools [data-tool]:hover,
	#chatbot-messages article .message-tools [data-tool].active {
		opacity: 1;
	}

	/* Werkzeug: Vorlesen */
	#chatbot-messages article .message-tools [data-tool="reader"]::before {
		content: '\1f50a';
	}

	#chatbot-messages article .message-tools .active[data-tool="reader"]::before,
	#chatbot-messages article .message-tools [data-tool="reader"]:hover::before {
		color: #ffd43b;
	}

	/* Werkzeug: Überprüfen */
	#chatbot-messages article .message-tools [data-tool="validate"]::before {
		content: '\1f50d';
	}

	#chatbot-messages article .message-tools .active[data-tool="validate"]::before,
	#chatbot-messages article .message-tools [data-tool="validate"]:hover::before {
		color: #e26f38;
	}

	/* Werkzeug: Neu-Laden */
	#chatbot-messages article .message-tools [data-tool="retry"]::before {
		content: '\1f501';
	}

	#chatbot-messages article .message-tools .active[data-tool="retry"]::before,
	#chatbot-messages article .message-tools [data-tool="retry"]:hover::before {
		color: #6688ea;
	}

	/* Werkzeug: Bewertungen */
	#chatbot-messages article .message-tools [data-tool="upvote"]::before {
		content: '\1f44d';
	}

	#chatbot-messages article .message-tools .active[data-tool="upvote"]::before,
	#chatbot-messages article .message-tools [data-tool="upvote"]:hover::before {
		color: #11c822;
	}

	#chatbot-messages article .message-tools [data-tool="downvote"]::before {
		content: '\1f44e';
	}

	#chatbot-messages article .message-tools .active[data-tool="downvote"]::before,
	#chatbot-messages article .message-tools [data-tool="downvote"]:hover::before {
		color: #e13940;
	}

	/* Darstellung Code Elemente */
	#chatbot-messages article code {
		white-space: pre-wrap;
	}

	#chatbot-messages article pre,
	#chatbot-messages article code.multiline {
		display: block;
		margin: 1rem 0;
	}

	/* Das erste Paragraph in einer Nachricht legt standardmäßig keinen Abstand nach oben fest */
	#chatbot-messages article p:first-child,
	#chatbot-messages article li > p:first-of-type {
		margin-top: 0;
	}

	/* Das letzte Paragraph in einer Nachricht legt standardmäßig keinen Abstand nach unten fest */
	#chatbot-messages article p:last-child,
	#chatbot-messages article li > p:last-of-type {
		margin-bottom: 0;
	}

	#audio-select-label,
	#audio-select-label-response {
		position: relative;
	}

	#audio-select,
	#audio-select-response {
		width: 12px;
		background: none;
		border: none;
		padding: 0 0 0 12px;
		cursor: pointer;
	}

	#audio-select-label::after,
	#audio-select-label-response::after {
		content: '\2193';
		font-size: 1.5rem;
		position: absolute;
		top: 0;
		left: 0;
		pointer-events: none;
	}

	button[name="search"]::after,
	button[name="respond"]::after {
		content: '\21B2';
	}

	#toggle-file-upload::after {
		content: '\2795';
		opacity: 0.4;
		cursor: pointer;
		font-size: 1.5rem;
	}

	#toggle-file-upload:hover::after {
		opacity: 1;
	}

	#file-upload-container {
		position: relative;
	}

	#file-list-container {
		display: flex;
		flex-direction: column;
		gap: 5px;
		position: absolute;
		min-width: 150px;
		padding: 10px;
		left: -15px;
		margin-top: 10px;
		background-color: #fff;
		filter: drop-shadow(0px 0px 1px #000);
		z-index: 2;
	}

	#file-list-container::before {
		content: '';
		position: absolute;
		left: 17px;
		top: -12px;
		width: 24px;
		height: 12px;
		background-color: #fff;
		clip-path: polygon(0 100%, 100% 100%, 50% 0);
	}

	#file-list-container:not(.active) {
		display: none;
	}

	#file-add {
		cursor: pointer;
		margin: 0;
	}

	#file-add input {
		width: 0;
		height: 0;
		position: absolute;
		top: -1000px;
	}

	#file-list-container #file-list {
		max-height: calc(10 * 1.25rem);
		max-width: 250px;
		overflow: auto;
	}

	#file-list-container .chatbot-file {
		height: 1.25rem;
		overflow: hidden;
		padding-right: 25px;
		text-overflow: ellipsis;
		position: relative;
		border-bottom: 1px solid #00000020;
		white-space: nowrap;
	}

	#file-list-container .chatbot-file p {
		text-overflow: ellipsis;
		overflow: hidden;
	}

	#file-list-container .chatbot-file .remove-file {
		position: absolute;
		top: 1px;
		right: 5px;
	}

	#file-list-container .chatbot-file .remove-file::before {
		content: '\274C';
		margin-left: 5px;
		font-size: .5rem;
		top: -3px;
		position: relative;
		cursor: pointer;
	}

	#query-container {
		display: flex;
		flex-grow: 1;
	}

	#audio-container,
	#audio-container-response {
		display: flex;
	}

	.voting-container {
		position: relative;
	}

	.comment-container {
		position: absolute;
		padding: 10px;
		background: #fff;
		filter: drop-shadow(0px 0px 1px #000);
		top: -245px;
		left: -300px;
		text-align: right;
	}

	.comment-container:not(.active) {
		display: none;
	}

	.comment-container.active {
		display: block;
	}

	.comment-container::before {
		content: '';
		position: absolute;
		right: 17px;
		bottom: -12px;
		width: 24px;
		height: 12px;
		background-color: #fff;
		clip-path: polygon(0 0, 50% 100%, 100% 0);
	}

	.comment-container textarea {
		resize: none;
		width: 300px;
		height: 150px;
		margin-bottom: 5px;
	}
}