/*VARS*/
:root {
	--size-ratio: 1;
	--fab-bottom: 1.6em;
	--fab-left: -0.2em;
	--fab-bottom-no-bar: -0.2em;
	--widget-view-max-height: var(--dialog-max-height);
	--modal-view-max-height: 50vh;
}

/*Generics*/
.llm-flex {
	display: flex;
}
.llm-flex-column {
	display: flex;
	flex-direction: column;
}
.llm-flex-reverse {
	display: flex;
	flex-direction: row-reverse;
}

.assistants-create-button-div {
	border-top: unset;
}

.llm-assistants-button {
	width: fit-content;
}

.llm-update-settings {
	padding-top: 0.75em;
	border-top: 1px solid var(--background-modifier-border);
}

.mt-auto {
	margin-top: auto;
}

/* TITLE */
.llm-title {
	flex-direction: column;
	font-weight: bold;
	margin-top: -5px;
	align-items: center;
	max-width: 75%;
	flex: 4;
}

.llm-title-div {
	text-align: center;
	padding-bottom: 20px;
}

.llm-modal-title-border {
	border-bottom: 1px solid var(--background-modifier-border);
	margin-left: -16px;
	width: calc(100% + 32px);
}

.llm-model-name {
	font-size: 8pt;
}

.llm-left-buttons-div {
	justify-self: flex-start;
}

.llm-right-buttons-div {
	justify-content: flex-end;
}

.llm-right-buttons-div,
.llm-left-buttons-div {
	flex: 1;
}

.floating-action-button-llm-title,
.modal-llm-title,
.widget-llm-title {
	overflow: hidden;
	text-overflow: ellipsis;
	text-wrap: nowrap;
}

.floating-action-button-llm-title {
	max-width: 106px;
}

.modal-llm-title {
	max-width: 351px;
}

.widget-llm-title {
	max-width: 170px;
}

/*MODAL VIEW*/
.llm-modal-chat-history-container {
	margin-top: 10px;
	margin-bottom: 10px;
}

.llm-modal-chat-container,
.llm-modal-settings-container,
.llm-widget-chat-container,
.llm-modal-assistants-container {
	margin-top: 20px;
}

.llm-modal-chat-container,
.llm-modal-chat-history-container,
.llm-modal-settings-container,
.llm-modal-assistants-container {
	min-height: 50vh;
}

.llm-modal-chat-container,
.llm-modal-chat-history-container,
.llm-modal-settings-container,
.llm-modal-assistants-container {
	max-height: var(--modal-view-max-height);
}

.llm-modal-chat-container,
.llm-modal-chat-history-container,
.llm-modal-settings-container,
.llm-modal-assistants-container,
.llm-widget-chat-container,
.llm-widget-settings-container,
.llm-widget-chat-history-container,
.llm-widget-assistant-container,
.fab-chat-container,
.fab-settings-container,
.fab-chat-history-container,
.fab-assistants-container {
	flex-direction: column;
	width: calc(100% - 4px);
	padding: 0 2px 0 2px;
	overflow: auto;
}

.llm-modal-chat-container,
.llm-widget-chat-container,
.fab-chat-container {
	justify-content: space-between;
	padding: 2px;
	width: 100%;
}

.llm-modal-messages-div {
	min-height: 10rem;
	max-height: 40vh;
	overflow-y: auto;
	margin-bottom: 15px;
}

.llm-flex-end {
	flex-direction: row;
	justify-content: flex-end;
	flex: 1;
}

.llm-flex-start {
	flex-direction: row;
	justify-content: flex-start;
}

.llm-modal-prompt-container {
	position: relative;
	width: 100%;
}

#chat-prompt-text-area {
	padding: 10px 45px 10px 10px;
	font-size: 16px;
	resize: none;
}

.llm-modal-chat-prompt-text-area,
.llm-widget-chat-prompt-text-area {
	height: 1px;
	width: 100%;
	min-height: 3rem;
}

.llm-send-button {
	border-radius: var(--button-radius);
	box-shadow: none;
	height: auto;
	line-height: 1;
	font-size: inherit;
	align-items: center;
	justify-content: center;
	cursor: var(--cursor);
	padding: var(--size-4-2);
	border-bottom: 1px solid var(--background-modifier-border);
	color: var(--llm-text-muted);
	background-color: var(--interactive-normal);
	--icon-size: var(--icon-s);
	--icon-stroke: var(--icon-s-stroke-width);
}

.llm-modal-send-button {
	position: absolute;
	bottom: 14px;
	right: 9px;
}

.fab-send-button,
.llm-widget-send-button {
	position: relative;
	height: 32px;
	aspect-ratio: 1;
}

/* IM LIKE MESSAGE*/
.llm-modal-messages-div > .im-like-message-container,
.fab-messages-div > .im-like-message-container,
.llm-widget-messages-div > .im-like-message-container {
	/* We do not want to set min width on assistant messages */
	/* only on user messages. */
	min-width: 100%;
}

.im-like-message-container {
	width: fit-content;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 10px;
	border-radius: 5px;
}

.im-like-message-container:nth-child(2n) {
	padding-left: 5px;
	border-radius: 8px;
	border: 1px solid var(--background-modifier-border);
	.im-like-message {
		text-align: left;
	}
}

.llm-assistant-logo + .im-like-message-container {
	display: flex;
	flex-flow: column;
}

.llm-assistant-buttons {
	width: 85px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
	margin-bottom: 8px;
}

.llm-modal-messages-div .llm-assistant-logo + .im-like-message-container,
.llm-widget-messages-div .llm-assistant-logo + .im-like-message-container {
	background-color: var(--background-secondary);
}

.mod-sidedock .llm-assistant-logo + .im-like-message-container,
.fab-messages-div .llm-assistant-logo + .im-like-message-container {
	background-color: var(--background-primary);
}

.llm-assistant-logo {
	margin-top: var(--size-4-1);
	margin-right: var(--size-4-3);
}

.mod-sidedock .llm-assistant-logo,
.fab-messages-div .llm-assistant-logo {
	margin-right: var(--size-4-2);
}

.llm-add-text,
.llm-refresh-output {
	margin-top: auto;
}

.llm-refresh-output {
	margin-right: 4px;
}

.im-like-message {
	padding: 5px 10px;
	p {
		margin: 0;
	}
}
div.im-like-message.llm-widget-chat-message > p {
	margin: 0;
}

.center-llmgal {
	margin-top: auto;
	margin-bottom: auto;
}

/*
FAB MESSAGE ICON CSS
*/

.im-like-message {
	width: calc(100% - 40px);
}

.llm-hide {
	visibility: hidden;
}

/* HISTORY CONTAINER */
.llm-history-item {
	justify-content: space-between;
	padding-left: 10px;
	border-radius: 5px;
}

.llm-history-item:first-child {
	padding-top: 10px;
}

.llm-history-item > p {
	margin: 0;
	min-width: 1px;
}

.llm-history-item:hover {
	box-shadow: var(--input-shadow-hover);
}

.history-buttons-div {
	align-items: center;
}

.llm-no-pointer {
	pointer-events: none;
}

.llm-delete-history-button {
	margin: 0 10px;
}

.edit-prompt-button,
.save-prompt-button,
.llm-add-text,
.llm-refresh-output,
#llm-delete-history-button {
	padding: 4px;
}

/* WIDGET*/

.llm-widget-chat-container {
	padding-bottom: var(--size-4-4);
}

.llm-widget-messages-div {
	overflow: auto;
}

.llm-widget-chat-prompt-text-area {
	margin-right: -40px;
	margin-top: 5px;
}

.llm-widget-prompt-container {
	display: flex;
	margin-top: auto;
}

.llm-widget-title-border {
	border-bottom: 1px solid var(--background-modifier-border);
	width: 100%;
}

.llm-widget-chat-container,
.llm-widget-settings-container,
.llm-widget-chat-history-container {
	max-height: var(--widget-view-max-height);
}

.llm-widget-chat-container,
.llm-widget-chat-history-container,
.llm-widget-settings-container {
	height: calc(100% - 70px);
}

.llm-widget-send-button,
.fab-send-button {
	margin-top: auto;
	top: -8px;
}

/* FAB VIEW CSS */

.fab-view-area {
	padding: var(--size-4-4);
	min-width: 260px;
	max-width: 260px;
	max-height: 500px;
	background-color: var(--background-secondary);
	border: 1px solid var(--background-modifier-border-focus);
	border-radius: var(--radius-m);
	margin-bottom: var(--size-4-2);
	margin-right: 3px;
	box-shadow: var(--shadow-s);
}

#_floating-action-button {
	height: auto;
	width: auto;
	padding: 3px;
}

#_floating-action-button > .buttonItem > svg.svg-icon {
	height: var(--icon-s);
	width: var(--icon-s);
}

#_floating-action-button .buttonItem {
	height: 32px;
	width: 32px;
	float: right;
	margin: 2px;
	cursor: pointer;
	padding: 5px 6px;
	box-shadow: var(--input-shadow);
	margin-left: 3px;
	border-radius: 3px;
	font-size: initial !important;
	background-color: var(--background-primary-alt);
	border: 1px solid var(--background-modifier-border);
}

#_floating-action-button button.buttonItem:hover {
	background-color: var(--background-secondary);
}

.fab-chat-prompt-text-area {
	height: 50px;
	margin-right: -40px;
	max-width: 100%;
}

.fab-prompt-container > input[type="text"] {
	height: unset;
}

.fab-settings-container,
.fab-chat-container,
.fab-assistants-container,
.fab-chat-history-container {
	overflow-y: auto;
	max-height: 300px;
	min-height: 300px;
}

.fab-messages-div {
	overflow-y: auto;
	max-height: 240px;
}

.fab-settings-container,
.fab-assistants-container,
.llm-widget-settings-container {
	.setting-item {
		flex-direction: column;
		.setting-item-info {
			margin-right: auto;
		}
		.setting-item-control {
			justify-content: center;
		}
	}
	.setting-item-description {
		padding-bottom: var(--size-4-1);
	}
}

.llm-widget-sidebar-assistants {
	.setting-item {
		display: flex;
		flex-direction: column;
		.setting-item-info {
			margin-right: auto;
		}
		.setting-item-control {
			justify-content: center;
		}
	}
}

.llm-widget-tab-assistants {
	.setting-item {
		display: flex;
		flex-direction: row;
	}
}

.llm-font-size-medium {
	font-size: 12px;
}

.llm-justify-content-center {
	justify-content: center;
}

.empty-history-cta {
	text-align: center;
	max-width: 25ch;
	display: flex;
	flex-direction: column;
}

.llm-empty-history-button {
	margin-top: 17px;
}

.fab-chat-message {
	font-size: 8pt;
}

.floating-action-button {
	position: absolute;
	right: calc(var(--fab-left) * var(--size-ratio) + var(--size-4-2));
	bottom: calc(var(--fab-bottom) * var(--size-ratio) + var(--size-4-2));
	overflow: hidden;
	z-index: 16;
}

/* LOADING ANIMATION TO USE BEFORE WE GET STREAMING UP */
.streaming-dot {
	color: var(--interactive-accent);
	font-size: 18pt;
	display: inline-block;
	animation-name: bouncing;
	animation-duration: 700ms;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
	&:nth-child(2) {
		animation-delay: 125ms;
	}
	&:nth-child(3) {
		animation-delay: 250ms;
	}
}

@keyframes bouncing {
	0% {
		transform: none;
	}

	33% {
		transform: translateY(-0.5em);
	}

	66% {
		transform: none;
	}
}

.llm-icon-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	> svg {
		color: var(--color-accent-1);
		width: 90px;
		height: 90px;
	}
}

.llm-icon-new-history > svg > path {
	fill: var(--text-muted);
}

.llm-icon-new-chat > svg > path {
	fill: var(--text-faint);
}

#llm-settings-credits {
	text-align: center;
}

.default-llm-header {
	font-weight: bold;
}

#llm-hero-credits {
	font-weight: bold;
	font-size: 15px;
	margin: 12px 0 0 0 !important;
}

.llm-hero-names {
	font-size: 14px;
	margin: 0px;
}

.llm-text-muted,
.version {
	color: var(--llm-text-muted);
	font-size: 12px;
}

#llm-settings-credits > p {
	font-size: 10pt;
	margin: 0;
}

.llm-vector-files {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: fit-content;
	background: var(--background-modifier-form-field);
	border-radius: 5px;
	max-width: 213px;
	min-width: 213px;
	gap: unset;
}

.llm-vector-file {
	border-radius: 5px;
	padding: 6px;
	width: 100%;
	text-align: start;
	border-bottom: 2px solid var(--background-modifier-border);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.llm-vector-file:hover {
	box-shadow: var(--input-shadow-hover);
}

.llm-vector-dropdown {
	gap: 50%;
}

.llm-file-added {
	background-color: var(--icon-color-active);
}
