@font-face {
	font-family: 'OpenSansRegular';
	src: url('/App/Resources/Font/OpenSansRegular.ttf');
}

@font-face {
	font-family: 'VisbyRegular';
	src: url('/App/Resources/Font/VisbyCF-Regular.otf');
}

@font-face {
	font-family: 'Inter';
	src: url('/App/Resources/Font/Inter/InterVariable.ttf');
}

object {
	-webkit-mask-image: none !important; /* some browsers add a mask */
	background: transparent !important;
}

.icon-button {
	cursor: pointer;
	padding: 7px;
	border-radius: 8px;
}

.icon-button:hover {
	color: var(--ButtonColor-700);
}

input:not([type=radio]), select, textarea {
	padding: 5px 6px 7px 6px;
}

.spacer {
	flex: 1 1 auto;
}

.inter-font {
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

.dark-mode .sp-content {
	color: #e0e0e0;
}

/* Override elements as needed */
.dark-mode .sp-content .icon-button:hover {
	color: #fff;
}

.role-color-circle {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: inline-block;
	margin-right: 0.5rem;
}

.construction-banner {
	display: block;
	position: fixed;
	right: 2rem;
	text-align: center;
	z-index: 100;
	padding: 0.1rem;
	border-radius: 1rem;
}

.bughunter-banner {
	display: block;
	position: fixed;
	right: 0;
	text-align: center;
	z-index: 100;
	padding: 0.1rem;
	font-weight: bold;
	border-radius: 1rem;
}

.construction-banner-title {
	display: none;
}

.bughunter-banner-title {
	display: none;
}

.construction-banner:before {
	content: "🚧";
}

.bughunter-banner:before {
	content: "🐛";
}

.chat-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0.5rem;
	overflow-y: auto;
}

.chat-category-title {
	font-size: small;
	opacity: 0.6;
}

.chat-category-list {
	display: flex;
	flex-direction: column;
	padding: 0.5rem 0 0.5rem 0.5rem;
}

.chat-item {
	place-content: center;
	padding: 5px;
}

.chat-item:hover {
	color: var(--FontColor);
	background: linear-gradient(to right, var(--sp-pv-primary-400), var(--sp-pv-primary-500));
	border-radius: 5px;
	cursor: pointer;
}

.chat-item .p-inputtext {
	margin: 0;
}

.chat-item.selected {
	color: var(--SecondaryTextColor);
	background: linear-gradient(to right, var(--sp-pv-primary-500), var(--sp-pv-primary-600));
	border-radius: 5px;
}

.chat-item.disabled {
	opacity: 0.5;
	pointer-events: none;
}

.chat-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
	cursor: pointer;
	font-weight: bold;
	height: 2rem;
	align-content: center;
}

.persona-list {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.persona-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	cursor: pointer;
	padding: 5px;
}

.persona-item:hover {
	background: linear-gradient(to right, var(--sp-pv-primary-400), var(--sp-pv-primary-500));
	color: var(--FontColor);
	border-radius: 5px;
}

.persona-item.selected {
	background: linear-gradient(to right, var(--sp-pv-primary-500), var(--sp-pv-primary-600));
	color: var(--SecondaryTextColor);
	border-radius: 5px;
}

.persona-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
	cursor: pointer;
	font-weight: bold;
}

.persona-description {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
	color: var(--SecondaryTextColor);
}

.persona-avatar {
    max-width: 2rem;
    max-height: 2rem;
    min-height: 2rem;
    min-width: 2rem;
	border-radius: 50%;
	/*margin-right: 0.5rem;*/
	object-fit: cover;
}

.persona-avatar-collapsed {
	cursor: pointer;
}

.persona-avatar.border {
	border: 1px solid var(--sp-pv-secondary);
}

.persona-avatar-small {
	max-width: 1.5rem;
	max-height: 1.5rem;
	min-height: 1.5rem;
	min-width: 1.5rem;
	border-radius: 50%;
	/*margin-right: 0.5rem;*/
	object-fit: cover;
}

.sidebar-item-button {
	cursor: pointer;
	padding: 0.5rem;
	border-radius: 5px;
	transition: background-color 0.3s ease;
	color: var(--sp-pv-text-color);
}

.sidebar-item-button:hover {
	background: linear-gradient(to right, var(--sp-pv-primary-500), var(--sp-pv-primary-400));
	color: var(--sp-pv-text-hover-color);
}

.memory-timestamp {
	opacity: 0.7;
}

.chat-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100dvh;
	padding: 2px 1rem;
	justify-self: center;
	position: relative;
	overflow-x: hidden;
}

/* media query for smaller screens */
@media (max-width: 600px) {
	.chat-container {
		padding: 2px;
		overflow: scroll
	}
}

.chat-header {
	position: sticky;
	width: 80%;
	padding: 1rem;
	font-weight: bold;
	text-align: center;
	align-self: center;
	box-shadow: var(--sp-pv-background-color) 0px 10px 20px 5px;
	z-index: 2;
	line-clamp: 3;
}

.chat-header .p-inputtext {
	margin: 0;
	font-weight: bold;
}

.chat-header > input {
	width: 90%;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	border: transparent 2px solid;
	background: none;
}

.chat-header > input:hover {
	border: var(--sp-pv-primary) 2px solid !important;
}

.chat-header > input:focus {
	border: var(--sp-pv-primary) 2px solid !important;
}

.chat-name {
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-height: 18px;
	max-height: 54px;
	-webkit-box-orient: vertical;
}

.editing-box {
	padding: 1rem;
	border: 1px solid lightgray;
	border-radius: 10px;
	background: rgb(0 0 0 / 5%);
	flex-grow: 1;
}

.chrome {
	--base-color: #666;
	background: linear-gradient(135deg, var(--base-color), hsl(0, 0%, 80%), var(--base-color));
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
	text-shadow: 0 0 5px black;
}
.chrome::after {
	content: '';
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 20%;
	background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
	pointer-events: none;
}

.user-message .markdown-container {
	background-image: linear-gradient(300deg, var(--sp-pv-primary-600), var(--sp-pv-primary-500));
	border-radius: 18px;
	justify-self: right;
	width: 80%;
}

.p-textarea.p-invalid {
	border-color: var(--DangerColor) !important;
	border-width: 3px !important;
}

/* Add additional dark mode overrides below */
html.dark-mode #Background {
	background-color: var(--sp-pv-content-background) !important;
	color: var(--sp-pv-text-color);
}

.dark-mode .system-logo {
	filter: invert(1) hue-rotate(168deg) saturate(10) brightness(1.8)
}

.dark-mode .chat-icon {
	filter: invert(1) hue-rotate(168deg) saturate(10) brightness(1.8)
}

.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 {
	color: var(--sp-pv-text-color);
}

.dark-mode .p-progressspinner-circle {
	stroke: white;
}