:root {
	--primary-bg-color: #333;
	--primary-text-color: white;
	--secondary-border-color: #ddd;
	--scrollbar-thumb-color: #888;
	--scrollbar-thumb-hover-color: #555;
}

.loader {
	position: relative;
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3498db;
	border-radius: 50%;
	width: 12px;
	height: 12px;
	animation: spin 2s linear infinite;
	left: 50% !important;
	margin-left: -6px;
}

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

#chat-gpt-icon {
	position: absolute;
	bottom: 25px;
	font-size: 42px;
	cursor: pointer;
	z-index: 99;
	left: 30px;
	display: none;
}

#chat-gpt-icon:hover {
	color: var(--functional);
}

#chat-gpt-window {
	display: none;
	position: absolute;
	right: 64px;
	bottom: 64px;
	width: 550px;
	height: 400px;
	border: 1px solid;
	background-color: var(--page-bg);
	flex-direction: column;
	border-radius: 4px;
	z-index: 99;
}

#chat-header {
	background-color: var(--primary-bg-color);
	color: var(--primary-text-color);
	padding: 5px;
	text-align: center;
	cursor: move;
	position: relative; /* Allows absolute positioning within the header */
}

#close-btn {
	position: absolute;
	right: 0px;
	/* top: 50%; */
	transform: translateY(-34%);
	border: none;
	background: none;
	color: var(--primary-text-color);
	cursor: pointer;
	font-size: 24px;
	font-weight: bold;
}

#close-btn:hover {
	color: #f00; /* Change color on hover, adjust as needed */
}

#maximize-btn {
	position: absolute;
	right: 30px;
	/* top: 50%; */
	transform: translateY(-34%);
	border: none;
	background: none;
	color: var(--primary-text-color);
	cursor: pointer;
	font-size: 24px;
	font-weight: bold;
}

#maximize-btn:hover {
	color: #f00; /* Change color on hover, adjust as needed */
}


#chat-content {
	flex-grow: 1;
	overflow-y: auto;
	padding: 10px;
	border-bottom: 1px solid;
}

#chat-input-area {
	display: flex;
	align-items: center;
	padding: 5px;
	gap: 5px;
}

#chat-input {
	flex-grow: 1;
	border: 1px solid var(--secondary-border-color);
	padding: 5px;
	resize: none;
	margin: 5px;
}

#send-btn {
	padding: 5px 10px;
	background-color: var(--primary-bg-color);
	color: var(--primary-text-color);
	cursor: pointer;
	border: none;
	height: 40px;
	margin: 2px;
	flex-shrink: 0;
	border-radius: 4px;
	font-weight: bold;
}

#send-btn:hover {
	background-color: var(--functional);
}

.sent-message {
	background-color: #e0e0e0;
	padding: 8px;
	margin: 5px 0;
	border-radius: 10px;
	max-width: 75%;
	color: black;
}

.received-message {
	background-color: #aed581;
	padding: 8px;
	margin: 5px 0;
	border-radius: 10px;
	max-width: 75%;
	position: relative;
	left: 20%;
	color: black;
}

.file-upload-label {
	background-color: var(--primary-bg-color);
	color: var(--primary-text-color);
	padding: 5px 10px;
	margin: 2px;
	cursor: pointer;
	border-radius: 4px;
	text-align: center;
	flex-shrink: 0;
}

.file-upload-label:hover {
	background-color: var(--functional);
}

div#chat-button-div {
	display: flex;
	flex-direction: column;
	align-items: normal;
}

.sent-message .fa-trash-alt {
	float: right;
	font-size: 22px;
	cursor: pointer;
}