/* Base variables */
:root {
	--chat-messages-height: 365px;
	--chat-messages-height-processing: 329px;
	--chat-messages-height-maximized: calc(100vh - (56px + 67px + 24px));
	--chat-messages-height-maximized-processing: calc(100vh - (56px + 67px + 24px + 36px));

	/* Theme Colors */
	--color-teal: #00D1BD;
	--color-teal-bright: #00FFE5;
	/* --color-teal-dark: #00A396; */
	--color-teal-dark: #008E80;
	--color-teal-darker: #004A42;
	--color-teal-light: #E6FFFC;
  --color-teal-lighter: #F0FFFE;

	--color-dark: #011826;
	--color-darker: #001018;
	--color-darkest: #000B10;
	--color-rgb-dark: 1 24 38;
	--color-rgb-darker: 0 16 24;
	--color-rgb-darkest: 0 11 16;

	--color-light: #E5E7EB;
	--color-lighter: #F3F4F6;
	--color-lightest: #F9FAFB;
	--color-rgb-light: 229 231 235;
	--color-rgb-lighter: 243 244 246;
	--color-rgb-lightest: 249 250 251;

	--red-500: #EF4444;
}

/* Custom Scrollbar Styling */
/* For Firefox */
@-moz-document url-prefix() {
	#chat-messages,
	#chat-input textarea,
	#chat-input div[contenteditable="true"],
	#chat-input div[contenteditable="false"],
	.table-wrapper,
	.codewrapper pre,
	.chat-response p > code {
		scrollbar-width: thin;
		scrollbar-color: var(--color-teal) rgba(0, 209, 189, 0.1);
	}
}

/* Theme Toggle Button */

/* Light Theme */
.theme-light {
	--bg-primary: #ffffff;
	--bg-secondary: #f9fafb;
	--bg-tertiary: #f3f4f6;
	--bg-header: var(--color-teal);
	--text-primary: #111827;
	--text-secondary: #374151;
	--text-tertiary: #6b7280;
	--text-quartenary: #9ca3af;
	--text-contrast: #000000;
	--border-color: #e5e7eb;
	--hover-bg: #E6FFFC;
	--input-bg: #ffffff;
	--scrollbar-track: rgba(0, 209, 189, 0.1);
	--scrollbar-thumb: var(--color-teal);
	--code-bg-primary: var(--color-lighter);
	--code-bg-secondary: var(--color-lightest);
	--message-user-bg: var(--color-teal);
	--message-user-text: #ffffff;
	--message-bot-bg: #f9fafb;
	--message-bot-text: #111827;
	--message-system-bg: #f9fafb;
	--message-system-text: #111827;
	--accent-color: var(--color-teal-bright);
	--notification-success: var(--color-teal);
	--selected-files-bg: #f3f4f6e6;
	--selected-files-shadow-color: #00000066;
	--login-header-text-color: #ffffff;
	--login-input-text-color: #111827;
	--login-bg-mix-blending-mode: luminosity;
	--login-bg-opacity: 0.25;
}

/* Dark Theme */
.theme-dark {
	--bg-primary: var(--color-dark);
	--bg-secondary: var(--color-darker);
	--bg-tertiary: #002A3D;
	--bg-header: var(--color-teal);
	--text-primary: #f9fafb;
	--text-secondary: #f3f4f6;
	--text-tertiary: #d1d5db;
	--text-quartenary: #9ca3af;
	--text-contrast: var(--color-teal);
	--border-color: #002A3D;
	--hover-bg: #002A3D;
	--input-bg: var(--color-darker);
	--scrollbar-track: rgba(0, 209, 189, 0.1);
	--scrollbar-thumb: var(--color-teal);
	--code-bg-primary: var(--color-darkest);
	--code-bg-secondary: var(--color-darkest);
	--message-user-bg: var(--color-teal);
	--message-user-text: #ffffff;
	--message-bot-bg: var(--color-darker);
	--message-bot-text: #f9fafb;
	--message-system-bg: var(--color-darker);
	--message-system-text: #f9fafb;
	--accent-color: var(--color-teal-bright);
	--notification-success: var(--color-teal);
	--selected-files-bg: #00111ae6;
	--selected-files-shadow-color: #000000aa;
	--login-header-text-color: #ffffff;
	--login-input-text-color: #111827;
	--login-bg-mix-blending-mode: multiply;
	--login-bg-opacity: 0.75;
}

.primary-bg {
	background-color: var(--color-teal);
	&:hover {
		background-color: var(--color-teal-dark);
	}
}

#chat-widget .bg-primary {
	background-color: var(--bg-primary);
}

/* Font Family */

.lato-thin {
  font-family: "Lato", serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", serif;
  font-weight: 900;
  font-style: italic;
}


#chat-widget {
	h1, h2, h3, h4, h5, h6, button {
		font-family: "Lato", serif;
	}
}

/* For Webkit browsers (Chrome, Safari, Edge) */
#chat-messages::-webkit-scrollbar,
#chat-input textarea::-webkit-scrollbar,
#chat-input div[contenteditable="true"]::-webkit-scrollbar,
#chat-input div[contenteditable="false"]::-webkit-scrollbar,
#selected-files-container::-webkit-scrollbar {
	width: 6px;
}

.table-wrapper::-webkit-scrollbar,
.math-block::-webkit-scrollbar,
.codewrapper pre::-webkit-scrollbar,
.chat-response p > code::-webkit-scrollbar,
.purchase-history > div::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

#chat-messages::-webkit-scrollbar-track,
#chat-input textarea::-webkit-scrollbar-track,
#chat-input div[contenteditable="true"]::-webkit-scrollbar-track,
#chat-input div[contenteditable="false"]::-webkit-scrollbar-track,
.table-wrapper::-webkit-scrollbar-track,
.math-block::-webkit-scrollbar-track,
.codewrapper pre::-webkit-scrollbar-track,
.chat-response p > code::-webkit-scrollbar-track,
.purchase-history > div::-webkit-scrollbar-track,
#selected-files-container::-webkit-scrollbar-track {
	background-color: var(--scrollbar-track);
	border-radius: 10px;
}

#chat-messages::-webkit-scrollbar-thumb,
#chat-input textarea::-webkit-scrollbar-thumb,
#chat-input div[contenteditable="true"]::-webkit-scrollbar-thumb,
#chat-input div[contenteditable="false"]::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb,
.math-block::-webkit-scrollbar-thumb,
.codewrapper pre::-webkit-scrollbar-thumb,
.chat-response p > code::-webkit-scrollbar-thumb,
.purchase-history > div::-webkit-scrollbar-thumb,
#selected-files-container::-webkit-scrollbar-thumb {
	background-color: var(--color-teal);
	border-radius: 10px;
	transition: background-color 0.2s ease;
}

/* Hover effect for the thumb */
#chat-messages::-webkit-scrollbar-thumb:hover,
#chat-input textarea::-webkit-scrollbar-thumb:hover,
#chat-input div[contenteditable="true"]::-webkit-scrollbar-thumb:hover,
#chat-input div[contenteditable="false"]::-webkit-scrollbar-thumb:hover,
.table-wrapper::-webkit-scrollbar-thumb:hover,
.math-block::-webkit-scrollbar-thumb:hover,
.codewrapper pre::-webkit-scrollbar-thumb:hover,
.chat-response p > code::-webkit-scrollbar-thumb:hover,
.purchase-history > div::-webkit-scrollbar-thumb:hover,
#selected-files-container::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-teal-bright);
}

/* Always show colored scrollbar */
#chat-messages,
#chat-input textarea,
/*#chat-input div[contenteditable="true"],*/
/*#chat-input div[contenteditable="false"],*/
.table-wrapper,
.math-block,
.codewrapper pre,
.chat-response p > code,
.purchase-history > div,
#selected-files-container {
	/* Track styles on hover */
	&:hover::-webkit-scrollbar-track {
		background: rgb(243, 244, 246);
	}
	
	/* Thumb styles on hover */
	&:hover::-webkit-scrollbar-thumb {
		background-color: var(--color-teal-bright);
	}
	
	/* Active state when scrolling */
	&::-webkit-scrollbar-thumb:active {
		background-color: var(--color-teal-dark); /* Even darker blue when scrolling (bg-blue-700) */
	}
}

/* Optional: Add a subtle transition effect when scrollbar appears/disappears */
#chat-messages,
#chat-input textarea,
#chat-input div[contenteditable="true"],
#chat-input div[contenteditable="false"],
.table-wrapper,
.math-block,
.codewrapper pre,
.chat-response p > code,
.purchase-history > div,
#selected-files-container {
	&::-webkit-scrollbar-thumb,
	&::-webkit-scrollbar-track {
		transition: all 0.2s ease;
	}
}

/* Apply scrollbar styles */
#chat-messages,
#chat-input textarea,
#chat-input div[contenteditable="true"],
#chat-input div[contenteditable="false"],
#selected-files-container {
	padding-right: 6px;
}

.table-wrapper,
.math-block,
.codewrapper pre,
.chat-response p > code,
.purchase-history > div {
	padding-top: 6px;
}

/* Login Screen */

/*
#login-screen:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(https://widgets.peritosacademy.com.br/chatt/assets/login-bg.jpg);
    mix-blend-mode: var(--login-bg-mix-blending-mode);
    opacity: var(--login-bg-opacity);
    z-index: 0;
}

#login-screen .content {
	background-color: var(--bg-tertiary);
    z-index: 1;
}
*/

#login-screen {
	background: url(https://widgets.peritosacademy.com.br/chat/v1/assets/login-bg-base.jpg) no-repeat 0% 0% / 100% 100%;

	&:before {
	  content: '';
	  position: absolute;
		top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background: url(https://widgets.peritosacademy.com.br/chat/v1/assets/login-bg-chars.png) no-repeat 0% 100% / 100% auto;
	  z-index: 0;
	}

	.content {
		position: relative;
		overflow: hidden;
	  z-index: 1;

		h2 {
			color: var(--login-header-text-color);

			span {
				padding: 2px;
				background: rgb( var(--color-rgb-darkest) / 25% );
			}
		}

		> div:before {
			content: '';
    	position: absolute;
    	top: -6px;
    	bottom: -6px;
    	left: -6px;
    	right: -6px;
    	background-color: var(--color-darkest);
    	z-index: -1;
    	border-radius: 6px;
    	opacity: 0.15;
		}

		#username-input {
			color: var(--login-input-text-color);
			background-color: #ffffff;
		}
	}
}

/* Chat Messages Container */
#chat-messages {
	max-height: var(--chat-messages-height);
	min-height: var(--chat-messages-height);

	&.processing {
		max-height: var(--chat-messages-height-processing);
		min-height: var(--chat-messages-height-processing);
	}

	svg.avatar {
		--svg-bg-color: var(--bg-tertiary);
		--svg-fg-color: var(--text-quartenary);
		--svg-accent-color: var(--color-teal);
	}

	/* Message Bubbles */
	.message-bubble {
		position: relative;
		box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
		transition: opacity 0.2s ease;

		&:hover {
			opacity: 0.95;
		}

		p {
			overflow-wrap: break-word;
			word-wrap: break-word;
			word-break: break-word;
			hyphens: auto;
		}

		p > code {
			display: block;
			text-wrap-mode: nowrap;
			overflow-x: auto;
			width: 100%;
		}

		.chat-response {
			> *:first-child {
				margin-top: 0;
				padding-top: 0;
			}

			> *:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
			}
		}
	}

	/* User Messages */
	.user-message {
		.message-bubble {
			border-bottom-right-radius: 4px;
			margin-right: 12px;

			&::after {
				content: '';
				position: absolute;
				right: -16px;
				top: 14px;
				border: 8px solid transparent;
				border-left-color: var(--message-user-bg);
			}
		}
	}

	/* Bot/System Messages */
	.bot-message .message-bubble,
	.system-message .message-bubble {
		border-bottom-left-radius: 4px;
		margin-left: 12px;

		&::after {
			content: '';
			position: absolute;
			left: -16px;
			top: 21px;
			transform: translateY(-50%);
			border: 8px solid transparent;
			border-right-color: var(--message-bot-bg);
		}
	}
}

#chat-messages:before {
	content: '';
	position: fixed;
	background: url(https://widgets.peritosacademy.com.br/chat/v1/assets/chat-bg.svg);
	left: 0; right: 6px; top: 0; bottom: 0;
	opacity: 0.075;
	z-index: 0;
	transition: filter 0.3s ease;
	pointer-events: none;
}

#chat-messages .chat-message .avatar-sprite {
    object-fit: cover;
}

/* Maximized Window Styles */
#chat-widget.maximized {
	#chat-messages {
		--chat-messages-height: var(--chat-messages-height-maximized);
		padding: 1rem;

		&.processing {
			--chat-messages-height: var(--chat-messages-height-maximized-processing);
		}
	}

	.chat-message {
		padding-left: 1rem;
		padding-right: 1rem;

		> div[class*="max-w-"] {
			max-width: 65%;
		}
	}

	.progress-bar-container {
		max-width: 65%;
	}
}

/* Loading Animations */
@keyframes typing {
	0%, 80%, 100% {
		transform: scale(0.6);
		opacity: 0.4;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}

.typing-dots {
	display: flex;
	align-items: center;

	.dot {
		width: 8px;
		height: 8px;
		margin: 0 2px;
		background-color: #9CA3AF;
		border-radius: 50%;
		animation: typing 1.4s infinite ease-in-out;
		animation-fill-mode: both;

		&:nth-child(1) { animation-delay: 0.2s; }
		&:nth-child(2) { animation-delay: 0.4s; }
		&:nth-child(3) { animation-delay: 0.6s; }
	}
}

/* Button & Loader States */
.login-loader,
.send-loader {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* Status Messages */
.status-text {
	min-width: 150px;
	transition: opacity 0.3s ease-in-out;
	animation: fadeInOut 0.3s ease-in-out;
}

@keyframes fadeInOut {
	0% { opacity: 0; transform: translateY(-5px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* Notification System */
.notification-area {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
	pointer-events: none;
}

@keyframes notificationSlideIn {
	to {
		transform: translateY(56px);
	}
}

@keyframes notificationSlideOut {
	to {
		transform: translateY(-64px);
		opacity: 0;
	}
}

.notification {
	position: absolute;
	top: 0;
	max-width: 100%;
	width: 100%;
	max-height: 64px;
	height: 64px;
	line-height: 1.2;
	margin-bottom: 0.5rem;
	padding: 0.75rem 1.15rem;
	border-radius: 0 0 0.375rem 0.375rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	background-color: rgb(37 99 235);
	color: rgb(255, 255, 255);
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: auto;
	transform: translateY(0);
	opacity: 0;
	transition: all 0.3s ease-in-out;
	z-index: 1;

	&.show {
		opacity: 1;
		animation: notificationSlideIn 0.3s ease-in-out forwards;
	}

	&.hide {
		top: 56px;
		opacity: 1;
		animation: notificationSlideOut 0.3s ease-in-out forwards;
	}

	/* Notification Types */
	&.error {
		background-color: rgb(239, 68, 68);
		color: rgb(255, 255, 255);
	}

	&.success {
		background-color: rgb(34, 197, 94);
		color: rgb(255, 255, 255);
	}

	&.warning {
		background-color: rgb(216, 156, 7);
		color: rgb(255, 255, 255);
	}

	&.info {
		background-color: rgb(105 105 105);
		color: rgb(255, 255, 255);
	}

	.notification-content {
		display: flex;
		column-gap: 0.5rem;
		align-items: center;
	}

	.notification-icon {
		width: 20px;
		height: 20px;
	}
}

/* Progress Bar Styles */
.progress-bar-container {
	width: 100%;
	max-width: calc(100% - 30px);
	height: 20px;
	background-color: var(--bg-secondary);
	border-radius: 10px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}

.progress-bar-wrapper {
	position: absolute;
	width: 0%;
	height: 100%;
	background-color: var(--color-teal);
	border-radius: 10px;
	transition: width 0.3s ease, background-color 0.3s ease;
	overflow: hidden;
	z-index: 2;
}

.progress-bar {
	position: relative;
	width: calc(640px - 30px);
	height: 100%;
}

.progress-text,
.underlaying-text {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 12px;
	font-weight: 500;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
	z-index: 1;
}

.underlaying-bar {
	width: 100%;
	height: 100%;
}

/* Math & KaTeX Styles */
.math-block {
	overflow-x: auto;
	max-width: 100%;
	padding: 1rem 0;
	justify-content: unset !important;

	.katex-display {
		margin: 0;
	}
}

/* Input Tooltip Styles */
.input-tooltip {
	pointer-events: none;
	white-space: nowrap;
	z-index: 10;
	transition: opacity 0.2s ease-in-out;

	&.opacity-0 {
		opacity: 0;
		visibility: hidden;
	}

	&:not(.opacity-0) {
		opacity: 1;
		visibility: visible;
	}
}

/* Sidepanel Mode Styles */
#chat-widget.display-sidepanel {
	position: relative;
	height: 100vh;
	width: 100%;
	border-radius: 0;
	display: flex;
	flex-direction: column;

	#chat-header {
		padding: 1rem 1.25rem;
		border-radius: 0;
	}

	#chat-messages {
		--chat-messages-height: calc(100vh - (56px + 83px + 36px));
		flex: 1;
		height: auto;
		/*padding: inherit;*/
		overflow-y: auto;
	}

	#chat-messages.processing {
		--chat-messages-height: calc(100vh - (56px + 83px + 36px + 36px));      
		--chat-messages-height-processing: var(--chat-messages-height);
	}

	#chat-input {
		padding: 1.25rem;
		padding-bottom: 0.5rem;
		border-top: 1px solid rgb(229, 231, 235);
	}

	.chat-message {
		max-width: 85%;
		margin-bottom: 1.5rem;

		&.user-message {
			margin-left: auto;
		}
	}

	.maximize-button,
	.icon-expand,
	.icon-collapse {
		display: none !important;
	}

	.progress-bar-container {
		margin: 0.5rem 1.25rem;
	}
}

/* Responsive Styles */
@media (min-width: 640px) {
	#chat-widget.display-sidepanel {
		width: 100%;
		max-width: 640px;

		.chat-message {
			max-width: 100%;
		}
	}
}

@media (min-width: 768px) {
	#chat-widget.display-sidepanel {
		max-width: 768px;
	}
}

@media (min-width: 1024px) {
	#chat-widget.display-sidepanel {
		max-width: 640px;
	}
}

@media (max-width: 639px) {
	#chat-widget.display-sidepanel {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;

		#chat-header {
			padding: 0.75rem 1rem;
		}

		#chat-messages {
			padding: 1rem;
		}

		#chat-input {
			padding: 1rem;

			textarea,
			div[contenteditable="true"],
			div[contenteditable="false"] {
				max-height: 100px;
			}
		}

		.chat-message {
			margin-bottom: 1rem;
			padding: 0 0.5rem;
		}

		.progress-bar-container {
			margin: 0.5rem 1rem;
		}
	}

	#chat-widget-iframe.maximized {
		width: 100%;
		height: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border-radius: 0;
	}
}

/* Message Animations */
@keyframes slideIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Theme Transition */
#chat-widget.display-sidepanel .chat-message {
	opacity: 0;
	transform: translateY(10px);
	animation: slideIn 0.3s ease forwards;
}

#chat-widget * {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Enhanced dark mode styles */
.theme-dark {
	#chat-messages {
		background: linear-gradient(180deg, var(--color-dark) 0%, var(--color-darker) 100%);
		
		&:before {
			opacity: 0.075;
			mix-blend-mode: color-dodge;
			filter: brightness(0.7);
		}
	}
	
	.message-bubble {
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
		
		&.user-message {
			box-shadow: 0 2px 12px rgba(0, 209, 189, 0.2);
		}
	}
	
	.codewrapper {
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
		border: 1px solid var(--border-color);
	}

	#menu-dropdown {
		border: 1px solid var(--border-color);
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
	}
}

/* Header info data */
#user-info,
#assistant-info {
    transition: opacity 0.3s ease;
}

/* For maximized state */
#chat-widget.maximized #user-info .text-xs,
#chat-widget.maximized #assistant-info .text-xs {
    font-size: 0.85rem;
}

/* For smaller screens */
@media (max-width: 480px) {
    #user-info .max-w-[120px],
    #assistant-info .max-w-[120px] {
        max-width: 100px;
    }
}

/* Button states and notifications */
.button-primary {
	background-color: var(--color-teal);
	&:hover {
		background-color: var(--color-teal-bright);
	}
}

.notification.success {
	background-color: var(--color-teal);
}

/* Progress bar enhancements */
.progress-bar-container {
	background: rgba(0, 209, 189, 0.1);
	border: 1px solid rgba(0, 209, 189, 0.2);
}

/*.progress-bar {
	background: linear-gradient(90deg, var(--color-teal) 0%, var(--color-teal-bright) 100%);
	box-shadow: 0 0 10px rgba(0, 209, 189, 0.3);
}*/

/* Loading animation colors */
.typing-dots .dot {
	background-color: var(--color-teal);
}

/* Scroll to bottom button */
.scroll-to-bottom-btn {
	background-color: var(--color-teal);
	
	&:hover {
		background-color: var(--color-teal-bright);
	}
}

.theme-dark .scroll-to-bottom-btn {
	background-color: var(--color-teal);
	
	&:hover {
		background-color: var(--color-teal-bright);
	}
}

.theme-light,
.theme-dark {
	#chat-header #chat-widget-header-title,
	#chat-header #menu-button,
	#chat-header #close-chat {
		color: #000000;
	}
	#credits-remaining .progress-text {
		color: #000000;
	}
}

.theme-light #chat-messages:before {
	filter: invert(1);
}

.theme-dark #chat-messages:before {
	filter: invert(0);
}

/* Theme-aware components */
#chat-widget {
	background-color: var(--bg-primary);
	color: var(--text-primary);
}

#chat-header {
	background-color: var(--bg-header);
}

#chat-messages {
	background-color: var(--bg-primary);

	#load-more-button {
		background-color: var(--bg-header);
	}

	button:not(
		#load-more-button,
		.copy-code-btn,
		.scroll-to-bottom-btn,
		[class*=" bg-["],
		[class^="bg-["]
	) {
		background-color: var(--bg-primary);
		border-color: var(--border-color)
	}

	.bg-gray-100 {
		background-color: var(--bg-tertiary);
	}

	.table-wrapper {
		.bg-white {
			background-color: var(--bg-primary);
		}
		.bg-gray-50 {
			background-color: var(--bg-secondary);
		}
		.border-gray-300 {
			border-color: var(--border-color);
		}
		.hover\:bg-gray-50:hover {
			background-color: var(--hover-bg);
		}
	}

	.codewrapper {
		color: var(--text-primary);
		.bg-gray-800 {
			background-color: var(--code-bg-primary);
		}
		.bg-gray-900 {
			background-color: var(--code-bg-secondary);
		}
		.copy-code-btn {
			color: var(--text-primary);
			background-color: var(--code-bg-secondary);
			&.bg-green-700 {
				background-color: var(--color-teal);
			}
		}
	}

	.text-gray-200 {
		color: var(--text-quartenary);
	}

	.text-gray-500 {
		color: var(--text-tertiary);
	}

	.text-gray-700 {
		color: var(--text-secondary);
	}

	.text-gray-900 {
		color: var(--text-primary);
	}
}

#chat-messages .chat-message .message-bubble * {
	transition: color 0.3s ease !important;
}

#chat-messages .chat-message.user-message .message-bubble {
	background-color: var(--message-user-bg);
	color: var(--message-user-text);
}

#chat-messages .chat-message.bot-message .message-bubble,
#chat-messages .chat-message.system-message .message-bubble {
	background-color: var(--message-bot-bg);
	color: var(--message-bot-text);

	.text-gray-700 {
		color: var(--message-bot-text);
	}
}

/* Input area */
/*#chat-input textarea,
#chat-input div[contenteditable="true"],
#chat-input div[contenteditable="false"] {
	background-color: var(--input-bg);
	color: var(--text-primary);
	border-color: var(--border-color);
}*/

#chat-input .input-tooltip {
	color: var(--text-tertiary);
	border-color: var(--border-color);
}

#chat-input kbd {
	background-color: var(--bg-secondary);
	color: var(--text-primary);
}

/* Scrollbar customization */
#chat-messages,
#chat-input textarea,
/*#chat-input div[contenteditable="true"],*/
/*#chat-input div[contenteditable="false"],*/
.table-wrapper,
.math-block,
.codewrapper pre,
.chat-response p > code,
.purchase-history > div,
#selected-files-container {
	&::-webkit-scrollbar-track {
		background-color: var(--scrollbar-track);
	}

	&::-webkit-scrollbar-thumb {
		background-color: var(--scrollbar-thumb);
	}

	&:hover::-webkit-scrollbar-track {
		background-color: var(--hover-bg);
	}

	&::-webkit-scrollbar-thumb:hover {
		background-color: var(--scrollbar-thumb);
	}
}

/* Code blocks */
pre {
	background-color: var(--code-bg-primary) !important;
}

pre code {
	color: var(--text-primary);
}

/* Menu and dropdowns */
#menu-dropdown {
	background-color: var(--bg-primary);
	border-color: var(--border-color);

	button {
		color: var(--text-primary);
	}
}

#menu-dropdown button:hover {
	background-color: var(--hover-bg);
}

#chat-widget.display-sidepanel,
#chat-widget.display-sidepanel #chat-input {
	border-color: var(--border-color);
}

/* Input tooltip */
.input-tooltip {
	background-color: var(--bg-primary);
	color: var(--text-primary);
	border-color: var(--border-color);
}

/* Progress bar */
.progress-bar-container {
	background-color: var(--bg-secondary);
}

/* Theme toggle button */
.theme-toggle {
	padding: 0.5rem;
	border-radius: 0.375rem;
	transition: background-color 0.3s ease;
}

.theme-toggle:hover {
	background-color: var(--hover-bg);
}

.theme-light .theme-toggle-icon-light {
	display: block;
}

.theme-light .theme-toggle-icon-dark {
	display: none;
}

.theme-dark .theme-toggle-icon-light {
	display: none;
}

.theme-dark .theme-toggle-icon-dark {
	display: block;
}

/* --- Scroll to bottom button --- */

/* Add to chat-widget.css */
.scroll-to-bottom-btn {
	position: fixed;
	/*bottom: calc(1rem + (77px + 40px));*/
	top: calc(var(--chat-messages-height) - 1rem);
	right: calc(6px + 1rem);
	background-color: var(--color-teal);
	color: white;
	padding: 0.5rem;
	border-radius: 9999px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes scrollBtnFadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0.9;
	}
}

@keyframes scrollBtnFadeOut {
	0% {
		opacity: 0.9;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}

.scroll-to-bottom-btn.visible {
	opacity: 0.9;
	visibility: visible;
	animation: scrollBtnFadeIn 0.3s ease forwards;
}

.scroll-to-bottom-btn.not-visible {
	opacity: 0;
	visibility: visible;
	animation: scrollBtnFadeOut 0.3s ease forwards;
}

.scroll-to-bottom-btn:hover {
	opacity: 1;
	background-color: var(--color-teal-bright);
}

.scroll-to-bottom-btn svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* Add theme support */
.theme-dark .scroll-to-bottom-btn {
	background-color: var(--color-teal);
}

.theme-dark .scroll-to-bottom-btn:hover {
	background-color: var(--color-teal-bright);
}

#chat-widget #chat-header #chat-widget-header-title,
#chat-widget #chat-header #menu-button,
#chat-widget #chat-header #theme-toggle,
#chat-widget #chat-header #close-chat,
#chat-widget #login-screen #login-button,
#chat-widget #chat-screen #load-more-button,
#chat-widget #chat-screen .scroll-to-bottom-btn,
#chat-widget #chat-screen .chat-message.user-message .message-bubble,
#chat-widget #chat-screen .chat-message .message-bubble div[data-assistant-choice="true"] button[data-choice="yes"],
#chat-widget #chat-screen #chat-send-button,
#chat-widget #chat-screen .progress-text {
	color: #000000;
}

/* Purchase History Modal Styles */
/* Purchase History Styles - Both for modal and in-chat message */
.purchase-history .animate-spin,
#purchase-history-modal .animate-spin {
  border-color: var(--color-teal);
  border-right-color: transparent;
}

.purchase-history table,
#purchase-history-modal table {
  border-collapse: collapse;
  width: 100%;
  border-radius: 0.375rem;
  overflow: hidden;
}

.purchase-history table {
	min-width: 560px;
}

.purchase-history th,
#purchase-history-modal th {
  text-transform: uppercase;
  font-size: 0.725rem;
  font-weight: 500;
}

.purchase-history td,
#purchase-history-modal td {
	font-size: 0.825rem;
}

.purchase-history th, 
.purchase-history td,
#purchase-history-modal th, 
#purchase-history-modal td {
  padding: 0.5rem 0.75rem;
  text-align: left;
}

/* Light Theme Styles */
.theme-light .purchase-history table,
.theme-light #purchase-history-modal table {
  border: 1px solid #e5e7eb;
  background-color: white;
}

.theme-light .purchase-history th,
.theme-light #purchase-history-modal th {
  color: #6b7280;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.theme-light .purchase-history td,
.theme-light #purchase-history-modal td {
  color: #111827;
  border-bottom: 1px solid #f3f4f6;
}

.theme-light .purchase-history tr,
.theme-light #purchase-history-modal tr {
	background-color: white;
}

.theme-light .purchase-history tr:nth-child(even),
.theme-light #purchase-history-modal tr:nth-child(even) {
  background-color: #f9fafb;
}

/* Dark Theme Styles */
.theme-dark .purchase-history table,
.theme-dark #purchase-history-modal table {
  border: 1px solid #4b5563;
  background-color: #1f2937;
}

.theme-dark .purchase-history th,
.theme-dark #purchase-history-modal th {
  color: #9ca3af;
  background-color: #374151;
  border-bottom: 1px solid #4b5563;
}

.theme-dark .purchase-history td,
.theme-dark #purchase-history-modal td {
   color: #f9fafb;
   border-bottom: 1px solid #4b5563;
}

.theme-dark .purchase-history tr,
.theme-dark #purchase-history-modal tr {
	background-color: #1f2937;
}

.theme-dark .purchase-history tr:nth-child(even),
.theme-dark #purchase-history-modal tr:nth-child(even) {
   background-color: #374151;
}

/* Theme-aware components */

#chat-widget {
	/* Background colors */
	[data-theme="primary-bg"],
	&[data-theme="primary-bg"] {
	  background-color: var(--bg-primary);
	}

	[data-theme="secondary-bg"] {
	  background-color: var(--bg-secondary);
	}

	[data-theme="header-bg"] {
	  background-color: var(--bg-header);
	}

	[data-theme="accent-bg"] {
	  background-color: var(--color-teal);
	}

	[data-theme="accent-bg-l1"] {
	  background-color: var(--color-teal-light);
	}

	[data-theme="accent-bg-l2"] {
	  background-color: var(--color-teal-lighter);
	}

	[data-theme="accent-bg-d1"] {
	  background-color: var(--color-teal-dark);
	}

	[data-theme="accent-bg-d2"] {
	  background-color: var(--color-teal-darker);
	}

	/* Text colors */
	[data-theme="text-primary"] {
	  color: var(--text-primary);
	}

	[data-theme="text-secondary"] {
	  color: var(--text-secondary);
	}

	[data-theme="text-tertiary"] {
	  color: var(--text-tertiary);
	}

	[data-theme="text-contrast"] {
	  color: var(--text-contrast);
	}

	/* Borders */
	[data-theme="border"] {
	  border-color: var(--border-color);
	}

	/* Input */
	[data-theme="input-bg"] {
	  background-color: var(--input-bg);
	}

	[data-theme="input-ring"] {
	  --tw-ring-color: var(--color-teal);
	}

	/* Additional theming for specific elements */
	#chat-messages {
	  background-color: var(--bg-primary);
	}

	#chat-input textarea,
	#chat-input div[contenteditable="true"],
	#chat-input div[contenteditable="false"] {
	  background-color: var(--input-bg);
	  color: var(--text-primary);
	  border-color: var(--border-color);
	}

	.chat-message.user-message .message-bubble {
	  background-color: var(--message-user-bg);
	  color: var(--message-user-text);
	}

	.chat-message.bot-message .message-bubble,
	.chat-message.system-message .message-bubble {
	  background-color: var(--message-bot-bg);
	  color: var(--message-bot-text);
	}

	#menu-dropdown {
	  background-color: var(--bg-primary);
	  border-color: var(--border-color);
	}

	#menu-dropdown button {
	  color: var(--text-primary);
	}

	#menu-dropdown button:hover {
	  background-color: var(--hover-bg);
	}

	.input-tooltip {
	  background-color: var(--bg-primary);
	  color: var(--text-primary);
	  border-color: var(--border-color);
	}

	/* SVG coloring */
	.chat-message svg.avatar {
	  --svg-bg-color: var(--bg-tertiary);
	  --svg-fg-color: var(--text-quartenary);
	  --svg-accent-color: var(--color-teal);
	}
}

.checkout-item-icon {
  background-color: var(--color-teal);
  padding: 8px;
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
}
.checkout-item-icon img {
  width: 1em;
}

/* File upload styles */
.file-upload-container {
  display: flex;
  position: absolute;
  align-items: center;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

#file-upload-button {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

#file-upload-button:hover,
.theme-dark #file-upload-button:hover {
  background-color: var(--color-teal);
}

#drag-drop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.3s ease;

  > div {
 	  background-color: var(--bg-primary);
  }
  h3, p {
 	  color: var(--text-primary);
  }
}

#drag-drop-overlay.hidden {
  display: none;
}

#drag-drop-overlay:not(.hidden) {
  opacity: 1;
}

#selected-files-container {
  position: absolute;
  bottom: calc(100% + 28px + 1rem);
  left: 0px;
  z-index: 99;
  background-color: var(--selected-files-bg);
  border: 2px solid var(--color-teal);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  min-width: 75%;
  max-height: 300px;
  overflow-y: auto;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px var(--selected-files-shadow-color);
}

#selected-files-container.hidden {
  display: none;
  max-height: 0;
  padding: 0;
  border: none;
}

#selected-files-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#selected-files-list > div {
	background-color: var(--bg-secondary);
}

#selected-files-list > div > div {
  margin-right: 20px;
}

#selected-files-list span {
	color: var(--text-tertiary);
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-primary);
  padding: 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.file-item:hover {
  background-color: var(--hover-bg);
}

.file-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.file-name {
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.file-size,
#files-size-info {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.remove-file-button,
#clear-files-button {
  color: var(--text-tertiary);
  transition: color 0.2s ease;
}

.remove-file-button:hover,
#clear-files-button:hover {
  color: var(--red-500);
}

/* Adjust chat input container for file upload button */
#chat-input {
  display: flex;
  flex-direction: column;
}

#chat-input-container {
  display: flex;
  align-items: center;
}

/* File attachment displays in messages */
.file-attachment {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  background-color: var(--bg-secondary);
  border-radius: 0.25rem;
  margin-top: 0.5rem;
  border: 1px solid var(--border-color);
}

.file-attachment-icon {
  color: var(--text-tertiary);
  margin-right: 0.5rem;
}

.file-attachment-info {
  flex: 1;
}

.file-attachment-name {
  font-size: 0.875rem;
  font-weight: 500;
}

.file-attachment-size {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.file-attachment-download {
  color: var(--accent-color);
}

.file-attachment-download:hover {
  text-decoration: underline;
}

/* Content-editable input styling */

#chat-input-field[contenteditable="true"],
#chat-input-field[contenteditable="false"] {
    outline: none;
    padding-right: 160px; /* Reserve space for file attachments */
    line-height: 1.5;
    height: 40px;
    font-family: inherit;
    font-size: inherit;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Placeholder styling for content-editable */
#chat-input-field[contenteditable="true"]:empty::before,
#chat-input-field[contenteditable="false"]:empty::before {
    content: attr(data-placeholder);
    color: #9CA3AF;
    pointer-events: none;
    position: absolute;
    left: 8px;
    top: 8px;
}

#chat-input-field[contenteditable="true"]:focus::before,
#chat-input-field[contenteditable="false"]:focus::before {
    display: none;
}

/* Remove placeholder when content exists */
#chat-input-field[contenteditable="true"]:not(:empty)::before,
#chat-input-field[contenteditable="false"]:not(:empty)::before {
    display: none;
}

/* File attachment tags inside input */
#input-file-attachments {
    max-height: calc(100% - 16px);
    overflow-y: auto;
    z-index: 10;
}

.file-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #EBF8FF;
    border: 1px solid #BEE3F8;
    border-radius: 12px;
    padding: 2px 6px;
    font-size: 11px;
    color: #2B6CB0;
    max-width: 120px;
    pointer-events: auto;
    cursor: default;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.file-tag:hover {
    background-color: #E6FFFA;
    border-color: #81E6D9;
}

.file-tag-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80px;
    font-weight: 500;
}

.file-tag-remove {
    cursor: pointer;
    color: #718096;
    font-weight: bold;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.file-tag-remove:hover {
    background-color: #FED7D7;
    color: #E53E3E;
}

/* Dark theme support for file tags */
.theme-dark .file-tag {
    background-color: rgba(0, 209, 189, 0.1);
    border-color: rgba(0, 209, 189, 0.3);
    color: #00FFE5;
}

.theme-dark .file-tag:hover {
    background-color: rgba(0, 209, 189, 0.2);
}

.theme-dark .file-tag-remove {
    color: #9CA3AF;
}

.theme-dark .file-tag-remove:hover {
    background-color: rgba(239, 68, 68, 0.2);
    color: #F87171;
}

/* Responsive adjustments for file attachments */
@media (max-width: 640px) {
    #chat-input-field[contenteditable="true"],
    #chat-input-field[contenteditable="false"] {
        padding-right: 120px;
    }
    
    #input-file-attachments {
        max-width: 100px;
    }
    
    .file-tag {
        font-size: 10px;
        padding: 1px 4px;
        max-width: 90px;
    }
    
    .file-tag-name {
        max-width: 60px;
    }
}

/* Auto-expand height animation */
#chat-input-field[contenteditable="true"],
#chat-input-field[contenteditable="false"] {
    transition: height 0.2s ease;
}

/* Focus state improvements */
#chat-input-field[contenteditable="true"]:focus,
#chat-input-field[contenteditable="false"]:focus {
    box-shadow: 0 0 0 2px rgba(0, 209, 189, 0.8);
}

/* Prevent selection of file tags when typing */
.file-tag {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Message attachments */

#chat-messages .chat-message .message-attachments {
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 8px;
		margin-right: 12px;

		.attachment-item {
			position: relative;
			color: var(--text-secondary);
			border: 1px solid var(--message-user-bg);
			border-radius: 0.375rem;
			cursor: default;

			.attachment-icon {
				color: var(--message-user-bg);
			}
			.attachment-name {
				font-size: 12px;
			}
			.attachment-size {
				font-size: 10px;
			}
			&:first-child:before {
				content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="%2300D1BDAA"><path d="m10.5249 3.89329c-1.6264-.00789-2.91947 1.28518-2.91157 2.91155l.04274 8.80546c.01261 2.5974 2.16008 4.7448 4.75753 4.7575 2.5161.0122 4.5166-1.9883 4.5044-4.5045l-.0404-8.31232c-.0025-.51728.415-.92517.9325-.91103.5174.01414.939.44494.9415.96223l.0403 8.31232c.0172 3.5343-2.7928 6.3444-6.3271 6.3272-3.6485-.0177-6.66495-3.0342-6.68266-6.6826l-.04275-8.80545c-.01284-2.64455 2.08975-4.74713 4.73431-4.73429 2.7299.01325 4.987 2.2703 5.0002 5.00024l.0412 8.4706c.0076 1.5768-1.2461 2.8305-2.8229 2.8228-1.6277-.0079-2.97348-1.3537-2.98139-2.9814l-.03476-7.16061c-.00251-.51729.41495-.92517.93245-.91103.5174.01413.939.44494.9415.96222l.0347 7.16062c.0028.5767.4796 1.0535 1.0563 1.0563.5587.0027 1.0028-.4415 1.0001-1.0001l-.0411-8.4706c-.0082-1.67889-1.3962-3.06696-3.0751-3.07511z"></path></svg>');
				position: absolute;
        width: 24px;
        height: 24px;
        left: calc((24px + 12px) * -1);
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
			}
		}
}