/* style.css */

:root {
	--bs-badge-padding-x: 0.9em;
	--bs-badge-padding-y: 0.7em;
	--color-purple: #673ab7;
	--color-purple-light: #f8f5ff;
	--color-purple-dark: #512da8;
	--color-purple-medium: #6751a8;
	--color-purple-hover: #afacf5;
	--color-accent: #8e63e6;
	--color-accent-glow: rgba(142,99,230,.4);
	--color-red-danger: #e74c3c;
	--color-red-danger-dark: #c0392b;
	--border-radius-pill: 25px;
	--border-radius-sm: 8px;
	--border-radius-md: 12px;
	--border-radius-lg: 16px;
	--transition-main: 0.3s ease;
	--bg-primary: #131417;
	--bg-secondary: #0D0D0F;
	--bg-tertiary: #1A1B1E;
	--bg-quaternary: #1a1b1e;
	--bg-light-panel: #25262b;
	--text-primary: #f0f2f5;
	--text-secondary: #909296;
	--text-placeholder: #5c5f66;
	--text-disabled: #8e8ea0;
	--border-color: #373A40;
	--button-hover: #40414f;
	--input-bg: #000000;
	--shadow-color: rgba(0,0,0,.3)
	/* New variables for pill styling consistency */
	--bg-card: var(--bg-secondary); /* Ensure this is defined for tool-card background */
	--bg-card-hover: var(--bg-tertiary); /* Ensure this is defined for tool-card hover background */
	--text-inactive-pill: var(--text-secondary); /* Default text color for non-active pills */
	--bg-pill-inactive: var(--bg-light-panel); /* Default background for non-active pills */
	--text-active-pill: #fff; /* Text color for active pills */
	--bg-pill-active: var(--color-accent); /* Background for active pills */
}

[data-theme=light] {
	--bg-primary: #fff;
	--bg-secondary: #f7f7f8;
	--bg-tertiary: #f1f3f5;
	--bg-quaternary: #e9ecef;
	--bg-light-panel: #e9ecef;
	--text-primary: #212529;
	--text-secondary: #6c757d;
	--text-placeholder: #adb5bd;
	--text-disabled: #6b6c7b;
	--border-color: #dee2e6;
	--button-hover: #d7d5d5;
	--input-bg: #fff;
	--shadow-color: rgba(0,0,0,.1)
	/* Light theme adjustments for new pill styling variables */
	--bg-card: #fff;
	--bg-card-hover: #f0f0f0;
	--text-inactive-pill: var(--text-secondary);
	--bg-pill-inactive: var(--bg-quaternary);
	--text-active-pill: #fff;
	--bg-pill-active: var(--color-accent);
}

* {
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	transition: background-color .3s ease,color .3s ease,border-color .3s ease
}

body {
	font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
	background-color: var(--bg-primary);
	color: var(--text-primary)
}

h1, h2, h3, h4, h5, h6, strong {
	color: var(--text-primary)
}

p {
	color: var(--text-secondary)
}

.hidden, .hide-important {
	display: none !important
}

.fw-500 {
	font-weight: 500
}

.fw-600 {
	font-weight: 600
}

.section-title {
	font-size: 4rem;
	font-weight: 700;
	margin-bottom: 1rem
}

.small-heading-size {
	font-size: .875rem;
	font-weight: 600
}

.text-purple {
	color: var(--color-purple)
}

.top-alert {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1050;
	width: 90%;
	max-width: 600px;
	box-shadow: 0 4px 12px rgba(0,0,0,.15)
}

.alert-dismissible .close, button.close {
	position: absolute;
	top: 0;
	right: 0;
	padding: .75rem 1.25rem;
	color: inherit;
	background-color: transparent;
	border: 0;
	-webkit-appearance: none
}

.close {
	float: right;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	opacity: .5
}

	.close:focus, .close:hover {
		color: #000;
		text-decoration: none;
		opacity: .75
	}

.btn-purple {
	background-color: var(--color-purple);
	color: #fff;
	border-radius: var(--border-radius-pill);
	padding: .75rem 1.5rem;
	transition: background-color var(--transition-main);
	display: inline-flex;
	align-items: center;
	border:none;
	
}

	.btn-purple:hover {
		background-color: var(--color-purple-hover);
		color: #fff
	}

	.btn-purple i {
		margin-left: .5rem
	}

.btn-outline-secondary {
	border-radius: var(--border-radius-pill);
	padding: .75rem 1.5rem;
	display: inline-flex;
	align-items: center;
	color: #000;
	background-color: #fff;
	border-color: #fff
}

	.btn-outline-secondary:hover {
		background-color: var(--color-purple-hover);
		color: #000;
		border-color: var(--color-purple-hover)
	}

.card {
	transition: transform var(--transition-main);
	position: relative
}

	.card a {
		font-size: 1.25rem;
		color: #4b4b4b;
		text-decoration: auto
	}

		.card a:hover {
			text-decoration: underline
		}

	.card:hover {
		transform: translateY(-5px);
		box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important
	}

.hero-section {
	padding: 5rem 0;
	text-align: center;
	background-color: #d2d0ff !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23f0f0f0' fill-opacity='0.1'%3E%3Cpath fill-rule='evenodd' d='M0 0h20v20H0V0zm20 20h20v20H20V20z'/%3E%3C/g%3E%3C/svg%3E")
}

	.hero-section p {
		font-size: 1.2rem;
		color: #000;
		max-width: 600px;
		margin: 20px auto;
		font-weight: 400
	}

.stats-section {
	padding: 3rem 0;
	text-align: center
}

.stats-card {
	background-color: #fff;
	border-radius: 15px;
	padding: 2rem;
	box-shadow: 0 .25rem .5rem rgba(0,0,0,.05)
}

	.stats-card i {
		font-size: 2rem;
		color: var(--color-purple);
		margin-bottom: .5rem
	}

	.stats-card h3 {
		font-size: 1.5rem;
		font-weight: 700;
		margin-bottom: .5rem
	}

	.stats-card p {
		color: #6c757d
	}

.feature-card {
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 1rem;
	overflow: hidden;
	transition: transform .3s ease,box-shadow .3s ease;
	display: flex;
	flex-direction: column;
	height: 100%
}

	.feature-card:hover {
		transform: translateY(-8px);
		box-shadow: 0 10px 30px rgba(0,0,0,.1)
	}

.feature-card-image {
	height: 200px;
	background-size: cover;
	background-position: center;
	position: relative
}

	.feature-card-image::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(to top,rgba(0,0,0,.6),transparent)
	}

.feature-card-content {
	padding: 1.5rem;
	flex-grow: 1;
	display: flex;
	flex-direction: column
}

	.feature-card-content h3 {
		color: var(--text-primary);
		font-weight: 700;
		display: flex;
		align-items: center;
		gap: .5rem;
		font-size: 1.3rem
	}

	.feature-card-content p {
		color: var(--text-secondary);
		flex-grow: 1
	}

.feature-icon {
	height: 1.2em;
	width: 1.2em;
	filter: invert(34%) sepia(82%) saturate(4529%) hue-rotate(256deg) brightness(89%) contrast(90%)
}

.tech-logos {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-top: 1.5rem;
	color: var(--text-secondary)
}

	.tech-logos img {
		height: 1.5rem;
		width: 1.5rem;
		object-fit: contain
	}

	.tech-logos span {
		font-size: .8rem;
		font-weight: 500
	}

.powered-by-section {
	padding: 4rem 0;
	background-color: var(--bg-secondary);
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color)
}

	.powered-by-section .logos-container {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 3rem;
		flex-wrap: wrap
	}

	.powered-by-section .tech-logo {
		display: inline-flex;
		align-items: center;
		gap: .75rem;
		color: var(--text-secondary);
		transition: color .3s ease
	}

		.powered-by-section .tech-logo:hover {
			color: var(--text-primary)
		}

		.powered-by-section .tech-logo img {
			height: 2.25rem
		}

		.powered-by-section .tech-logo span {
			font-size: 1.2rem;
			font-weight: 600
		}

.cta-section {
	background-color: var(--color-purple-medium);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%237d5bbe' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h20v20H0V0zm20 20h20v20H20V20z'/%3E%3C/g%3E%3C/svg%3E");
	color: #fff;
	padding: 5rem 0;
	text-align: center
}

	.cta-section h2 {
		font-size: 2.5rem;
		font-weight: 700;
		margin-bottom: 1rem
	}

	.cta-section p {
		font-size: 1.2rem;
		margin-bottom: 2rem
	}

	.cta-section .btn-cta {
		background-color: #fff;
		color: var(--color-purple);
		border-radius: var(--border-radius-pill);
		padding: .75rem 1.5rem;
		transition: background-color var(--transition-main);
		display: inline-flex;
		align-items: center
	}

		.cta-section .btn-cta i {
			margin-left: .5rem
		}

		.cta-section .btn-cta:hover {
			background-color: #f0f0f0
		}

.footer {
	background-color: #f8f9fa;
	padding: 1rem 0;
	text-align: center;
	color: #6c757d
}

	.footer a {
		color: #6c757d;
		text-decoration: none;
		margin: 0 .5rem
	}

		.footer a:hover {
			text-decoration: underline
		}

.floating-button-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1000
}

.floating-button {
	display: inline-flex;
	align-items: center;
	background-color: #000;
	color: #fff;
	text-decoration: none;
	padding: 10px 15px;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0,0,0,.3);
	transition: opacity .3s ease;
	font-size: 12px
}

	.floating-button:hover {
		opacity: .8
	}

.floating-button-icon {
	width: 20px;
	height: 20px;
	margin: 0 5px
}

.close-button {
	margin-left: 10px;
	cursor: pointer;
	font-size: 16px
}

.blog-generator-section {
	padding: 3rem 0;
	text-align: center
}

	.blog-generator-section h2 {
		font-size: 2rem;
		font-weight: 700;
		margin-bottom: 1rem
	}

	/* FIX: Use theme variable for the paragraph text color */
	.blog-generator-section p {
		color: var(--text-secondary);
	}

/* FIX: Use theme variables for background and border */
.back-button-container {
	padding: 20px;
	background-color: var(--bg-secondary);
	border-bottom: 1px solid var(--border-color);
}

/* FIX: Use theme variables for link color */
.back-button {
	color: var(--text-secondary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	transition: color 0.3s ease;
}
	/* FIX: Use theme variables for link hover color */
	.back-button:hover {
		text-decoration: underline;
		color: var(--text-primary);
	}

	.back-button i {
		margin-right: 5px
	}

.blog-generator-container {
	display: flex;
	flex-direction: column;
	gap: 2rem
}

/* FIX: Use theme variables for card background, border, and shadow */
.blog-input-card, .blog-output-card {
	width: 100%;
	background-color: var(--bg-secondary);
	border-radius: 15px;
	padding: 2rem;
	box-shadow: 0 4px 12px var(--shadow-color);
	text-align: left;
	border: 1px solid var(--border-color);
}

	.blog-input-card label {
		display: block;
		font-weight: 700;
		margin-bottom: .5rem;
		color: var(--text-primary);
	}

	/* FIX: Use theme variables for form inputs */
	.blog-input-card input, .blog-input-card select, .blog-input-card textarea {
		width: 100%;
		padding: .75rem;
		margin-bottom: 1.5rem;
		border: 1px solid var(--border-color);
		border-radius: .375rem;
		background-color: var(--input-bg);
		color: var(--text-primary);
		transition: all 0.25s ease;
	}

		/* FIX: Add a consistent focus style for better UX */
		.blog-input-card input:focus, .blog-input-card select:focus, .blog-input-card textarea:focus {
			border-color: var(--color-accent);
			background-color: var(--bg-primary);
			box-shadow: 0 0 0 3px var(--color-accent-glow);
			outline: none;
		}

	.blog-input-card textarea {
		resize: vertical;
		min-height: 100px
	}

.blog-output-card {
	text-align: left
}

/* FIX: Use theme variables for the output area background and border */
.blog-generator-output {
	background: var(--bg-tertiary);
	border-radius: 15px;
	border: 1px solid var(--border-color);
	padding: 1rem;
	height: 92%;
	max-height: 490px;
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: #555 transparent;
}

	.blog-generator-output h1 {
		font-size: 1.8rem;
		font-weight: 700
	}

	.blog-generator-output h2 {
		font-size: 1.5rem
	}

	.blog-generator-output h3 {
		font-size: 1.2rem;
		font-weight: 700
	}

/* FIX: Use theme variables for icon buttons */
.copy-btn {
	color: var(--text-secondary);
	cursor: pointer;
	transition: color 0.3s ease;
}

	.copy-btn:hover {
		color: var(--text-primary);
	}

/* FIX: Use theme variable for the error message color */
#generate_error p {
	color: var(--color-red-danger) !important
}

.generate-button {
	width: 100%;
	background-color: var(--color-purple);
	color: #fff;
	border: none;
	padding: .75rem 1.5rem;
	border-radius: .375rem;
	cursor: pointer;
	transition: background-color var(--transition-main)
}

	.generate-button:hover {
		background-color: var(--color-purple-dark)
	}

.chatbot-body, .chat-container {
	height: 100vh;
	overflow: hidden;
}

.chatbot-body {
	background-color: var(--bg-primary) !important;
	color: var(--text-primary);
	margin: 0;
	height: 100vh;
	overflow: hidden;
}

.chat-container {
	display: flex;
	flex-direction: column
}

.chatbot-sidebar {
	background-color: var(--bg-secondary);
	width: 260px;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	padding: 10px;
	display: flex;
	flex-direction: column;
	z-index: 100
}

.chatbot-main-content {
	margin-left: 260px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
	padding-top: 57px;
	height: 100vh;
	min-height: auto;
}

.chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	background-color: var(--bg-primary);
	scrollbar-width: inherit;
	scrollbar-color: #555 transparent;
}

.chat-messages .h1, h1{
	font-size: 1.8rem !important;
}

.chat-messages .h2, h2{
	font-size: 1.5rem !important;
}

.chat-messages .h3, h3{
	font-size: 1.2rem !important;
}

.chat-message {
	/*max-width: 1000px;*/
	padding: 20px;
	border-radius: 8px;
	width: 100%;
	display: flex;
	align-items: flex-start;
	color: var(--text-primary)
}

.bot-message {
	background-color: var(--bg-tertiary);
	margin-right: auto;
	margin-left: 0;
	width: 100%
}

.user-message {
	background-color: var(--bg-primary);
	margin-left: auto;
	margin-right: 0;
	justify-content: flex-end;
	width: auto;
	min-width: 200px;
}

.message-icon {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center
}

.bot-message .message-icon {
	margin-right: 12px
}

.user-message .message-icon {
	margin-left: 12px;
	order: 2
}

.message-content {
	/*flex-grow: 1;*/
	display: grid;
	color: var(--text-primary);
	line-height: 1.5
}

.user-message .message-content {
	display: flex;
	flex-direction: column;
	align-items: flex-end; /* Align content to the right for user messages */
	gap: 8px;
}


.message-file-previews {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: flex-end; /* Align previews to the right */
	max-width: 350px; /* Limit the width of the preview area */
}

	.message-file-previews .file-preview-item {
		width: 40px; /* Slightly smaller previews in the chat */
		height: 40px;
		border-radius: 4px;
	}

.message-text {
	/*text-align: right;*/
	width: 100%;
}

.chat-input-area {
	padding: 20px;
	background-color: var(--bg-primary);
	border-top: 1px solid var(--border-color);
	z-index: 1000;
	flex-shrink: 0;
}

.chat-input-container {
	max-width: 800px;
	margin: 0 auto;
	position: relative
}

.prompt-container {
	background-color: var(--bg-secondary);
	border-radius: 12px;
	padding: 8px;
	position: relative
}

.prompt-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px;
	margin-bottom: 8px
}

.action-button {
	background-color: var(--bg-secondary);
	color: var(--text-primary);
	border: none;
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: background-color .3s ease
}

	.action-button:hover {
		background-color: var(--bg-tertiary)
	}

	.action-button i {
		font-size: 14px
	}

.more-actions {
	margin-left: auto
}

.chat-input {
	background-color: transparent;
	border: none;
	color: var(--text-primary);
	padding: 8px 45px 8px 12px;
	width: 100%;
	resize: none;
	min-height: 44px;
	font-size: 16px;
	/* Firefox scrollbar */
	scrollbar-width: thin;
	scrollbar-color: #555 transparent;
}



	.chat-input:focus {
		outline: none
	}

	.chat-input::placeholder {
		color: var(--text-secondary)
	}

.input-buttons {
	/*position: absolute;*/
	right: 12px;
	bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px
}

.input-buttons {
	display: flex;
	justify-content: space-between;
}

.input-button {
	background: 0 0;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color .3s ease
}

	.input-button:hover {
		color: var(--text-primary)
	}

	.input-button i {
		font-size: 16px
	}

.chat-send-button {
	position: absolute;
	right: 10px;
	bottom: 10px;
	background: 0 0;
	border: none;
	color: var(--text-primary);
	cursor: pointer
}

	.chat-send-button:hover {
		color: var(--text-secondary)
	}

.new-chat-button {
	width: 100%;
	padding: 10px;
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	border-radius: 6px;
	margin-bottom: 20px;
	text-align: left;
	transition: background-color .3s ease;
	display: flex;
	align-items: center
}

	.new-chat-button:hover {
		background-color: var(--bg-tertiary)
	}

.chat-history {
	color: var(--text-primary);
	margin-top: 20px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #555 transparent;
}

.chat-history-item {
	padding: 10px;
	cursor: pointer;
	border-radius: 5px;
	transition: background-color .3s ease
}

	.chat-history-item:hover {
		background-color: var(--bg-tertiary)
	}

	.chat-history-item.active {
		background-color: var(--button-hover)
	}

.chatbot-navbar {
	background-color: var(--bg-primary);
	border-bottom: 1px solid var(--border-color);
	padding: 8px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	top: 0;
	left: 260px;
	right: 0;
	z-index: 1000;
	height: 57px
}

.model-selector {
	position: relative;
	display: contents
}

.model-select-btn {
	background: 0 0;
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	padding: 8px 16px;
	border-radius: 5px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	transition: background-color .3s ease
}

	.model-select-btn:hover {
		background-color: var(--bg-secondary)
	}

.model-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	width: 300px;
	margin-top: 5px;
	display: none;
	z-index: 1002;
	overflow: hidden
}

	.model-dropdown.show {
		display: block
	}

.model-dropdown-header {
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--bg-secondary)
}

.model-dropdown-title {
	color: var(--text-primary);
	font-size: 14px;
	font-weight: 500
}

.close-model-dropdown {
	background: 0 0;
	border: none;
	color: var(--text-primary);
	padding: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	transition: background-color .3s ease
}

	.close-model-dropdown:hover {
		background-color: var(--bg-tertiary)
	}

.model-options-container {
	max-height: 400px;
	overflow-y: auto
}

.model-option {
	padding: 16px;
	cursor: pointer;
	border-bottom: 1px solid var(--border-color);
	transition: background-color .3s ease
}

	.model-option:last-child {
		border-bottom: none
	}

	.model-option:hover {
		background-color: var(--bg-tertiary)
	}

.model-name {
	color: var(--text-primary);
	font-size: 14px;
	margin-bottom: 4px
}

.model-description {
	color: var(--text-secondary);
	font-size: 12px;
	line-height: 1.4
}

.navbar-right {
	display: flex;
	align-items: center;
	gap: 10px
}

.navbar-button {
	background: 0 0;
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	padding: 6px 12px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
	text-decoration: auto
}

	.navbar-button:hover {
		background-color: var(--bg-secondary)
	}

.mobile-menu-button {
	display: none;
	background: 0 0;
	border: none;
	color: var(--text-primary);
	font-size: 20px;
	cursor: pointer;
	padding: 8px
}

.upload-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,.7);
	z-index: 2000;
	align-items: center;
	justify-content: center
}

	.upload-modal.show {
		display: flex
	}

.upload-container {
	background-color: var(--bg-secondary);
	border-radius: 8px;
	padding: 24px;
	width: 90%;
	max-width: 500px;
	position: relative
}

.upload-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px
}

.upload-title {
	font-size: 18px;
	font-weight: 500;
	color: var(--text-primary)
}

.text-white {
	font-size: 1rem;
	color: var(--text-primary) !important
}

.close-upload {
	background: 0 0;
	border: none;
	color: var(--text-secondary);
	font-size: 20px;
	cursor: pointer;
	padding: 4px
}

	.close-upload:hover {
		color: var(--text-primary)
	}

.upload-area {
	border: 2px dashed var(--border-color);
	border-radius: 8px;
	padding: 40px 20px;
	text-align: center;
	cursor: pointer;
	transition: all .3s ease;
	margin-bottom: 20px
}

	.upload-area.dragover {
		border-color: var(--text-primary);
		background-color: rgba(255,255,255,.05)
	}

.upload-icon {
	font-size: 40px;
	color: var(--border-color);
	margin-bottom: 12px
}

.upload-text {
	color: var(--text-secondary);
	margin-bottom: 12px
}

.upload-button-close-bg {
	background-color: #565869 !important
}

.upload-button-delete-bg {
	background-color: #dc3545 !important
}

.upload-button-close-clr, .upload-button-delete-clr {
	color: #fff !important
}

.upload-button {
	background-color: var(--border-color);
	color: var(--text-primary);
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	transition: background-color .3s ease
}

	.upload-button:hover {
		background-color: var(--bg-tertiary)
	}

.file-input {
	display: none
}

.selected-files {
	margin-top: 16px;
	color: var(--text-secondary)
}

.file-list {
	margin-top: 8px;
	max-height: 100px;
	overflow-y: auto
}

.file-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px;
	background-color: var(--bg-secondary);
	border-radius: 4px;
	margin-bottom: 4px
}

.file-name {
	color: var(--text-primary);
	font-size: 14px
}

.remove-file {
	background: 0 0;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	padding: 4px
}

	.remove-file:hover {
		color: var(--text-primary)
	}

.max-width-650 {
	max-width: 650px
}

.empty-chat-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 57px);
	padding: 20px;
	margin-top: -57px
}

	.empty-chat-state h1 {
		font-size: 2.5rem;
		font-weight: 500;
		text-align: center;
		margin-bottom: 2rem;
		color: var(--text-primary)
	}

	.empty-chat-state .chat-input-container {
		width: 100%;
		max-width: 750px;
		margin: 0 auto
	}

	.empty-chat-state .prompt-container {
		background-color: var(--bg-tertiary);
		border: 1px solid var(--border-color);
		border-radius: 12px;
		padding: 12px
	}

	.empty-chat-state .prompt-actions {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 4px;
		margin-bottom: 12px;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none
	}

		.empty-chat-state .prompt-actions::-webkit-scrollbar {
			display: none
		}

	.empty-chat-state .action-button {
		white-space: nowrap;
		padding: 8px 12px;
		font-size: 14px;
		background-color: var(--bg-primary)
	}

	.empty-chat-state .chat-input {
		background-color: transparent;
		border: none;
		color: var(--text-primary);
		width: 100%;
		resize: none;
		min-height: 44px;
		font-size: 16px;
		padding: 8px 45px 8px 0px;
		padding-bottom: 18px;
	}

	.empty-chat-state .input-buttons {
		/*position: absolute;*/
		right: 24px;
		bottom: 12px;
		display: flex;
		align-items: center;
		gap: 8px
	}

.chat-title {
	color: var(--text-primary);
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.chat-timestamp {
	color: var(--text-disabled);
	font-size: 12px;
	margin-top: 2px
}

.typing-indicator {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 20px;
	max-width: 800px;
	color: var(--text-secondary);
	font-size: 14px
}

	.typing-indicator .dots {
		display: flex;
		gap: 4px
	}

	.typing-indicator .dot {
		width: 4px;
		height: 4px;
		background-color: var(--text-secondary);
		border-radius: 50%;
		animation: typingAnimation 1.4s infinite
	}

		.typing-indicator .dot:nth-child(2) {
			animation-delay: .2s
		}

		.typing-indicator .dot:nth-child(3) {
			animation-delay: .4s
		}

.delete-chat {
	white-space: nowrap;
	padding: 6px 10px;
	font-size: 12px;
	background-color: var(--bg-primary);
	border: 0;
	border-radius: 100%
}

	.delete-chat i {
		color: #848484
	}

		.delete-chat i:hover {
			color: #a50000
		}

.chat-has-messages {
	/*padding-bottom: 180px;*/
}

.close-dropdown {
	border: 0px;
}

[data-theme=dark] .close-dropdown {
	color: var(--text-primary);
	background-color: var(--bg-secondary);
}

.extra-bottom-space {
	margin-bottom: 0
}

.video-generator-ui {
	font-family: 'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	line-height: 1.5
}

	.video-generator-ui h2 {
		font-size: clamp(1.2rem, 2vw, 1.35rem);
		font-weight: 700;
		margin-bottom: 24px
	}

	.video-generator-ui h3 {
		font-size: clamp(1.1rem, 1.5vw, 1.2rem);
		font-weight: 700
	}

	.video-generator-ui h4 {
		color: var(--text-secondary);
		font-size: .85rem;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: .5px;
		margin-bottom: 4px
	}

[data-theme=light] .vg-ratio-icon {
	filter: brightness(0) invert(.3) !important;
}

.video-generator-ui .vg-app-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh
}

.video-generator-ui .vg-icon-nav {
	display: flex;
	background-color: var(--bg-secondary);
	border-bottom: 1px solid var(--border-color);
	padding: 4px 0;
	justify-content: center;
	gap: 8px
}

.video-generator-ui .vg-icon-nav-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	border-radius: var(--border-radius-sm);
	cursor: pointer;
	color: var(--text-secondary);
	text-decoration: none;
	font-size: .75rem;
	transition: all .25s ease
}

	.video-generator-ui .vg-icon-nav-item i {
		font-size: 1.25rem
	}

	.video-generator-ui .vg-icon-nav-item:hover {
		color: var(--text-primary);
		background-color: var(--bg-light-panel)
	}

	.video-generator-ui .vg-icon-nav-item.active {
		color: var(--text-primary);
		background-color: var(--bg-light-panel)
	}

		.video-generator-ui .vg-icon-nav-item.active::before {
			content: '';
			position: absolute;
			left: 0;
			top: 25%;
			height: 50%;
			width: 3px;
			background: var(--color-accent);
			border-radius: 0 4px 4px 0;
			display: none
		}

.video-generator-ui #vg-theme-toggle-nav {
	cursor: default
}

	.video-generator-ui #vg-theme-toggle-nav:hover {
		background-color: transparent
	}

.video-generator-ui .vg-theme-icon-wrapper {
	position: relative;
	width: 1.25rem;
	height: 1.25rem;
	margin-bottom: 4px
}

	.video-generator-ui .vg-theme-icon-wrapper .fas {
		position: absolute;
		transition: opacity .2s ease,transform .2s ease
	}

	.video-generator-ui .vg-theme-icon-wrapper .fa-sun {
		color: #f39c12
	}

	.video-generator-ui .vg-theme-icon-wrapper .fa-moon {
		color: #bdc3c7
	}

[data-theme=light] .vg-theme-icon-wrapper .fa-moon {
	opacity: 0;
	transform: scale(.5)
}

[data-theme=light] .vg-theme-icon-wrapper .fa-sun {
	opacity: 1;
	transform: scale(1)
}

[data-theme=dark] .vg-theme-icon-wrapper .fa-sun {
	opacity: 0;
	transform: scale(.5)
}

[data-theme=dark] .vg-theme-icon-wrapper .fa-moon {
	opacity: 1;
	transform: scale(1)
}

.video-generator-ui #vg-theme-toggle-nav .vg-toggle-switch {
	transform: scale(.7);
	margin-top: -2px
}

.video-generator-ui .vg-sidebar {
	background-color: var(--bg-tertiary);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.video-generator-ui .vg-btn {
	background-color: var(--bg-light-panel);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	padding: 12px 16px;
	text-align: left;
	font-size: .9rem;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: all .25s ease
}

	.video-generator-ui .vg-btn:hover {
		border-color: var(--text-secondary);
		background-color: #2c2e33
	}

[data-theme=light] .vg-btn:hover {
	background-color: #dce1e6
}

.video-generator-ui .vg-btn .fa-google {
	background-color: #4285f4;
	color: #fff;
	padding: 6px;
	border-radius: 50%;
	font-size: .8em
}

.video-generator-ui .vg-btn .vg-arrow {
	margin-left: auto;
	color: var(--text-secondary);
	transition: transform .25s ease
}

.video-generator-ui .vg-start-image {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 40px 20px;
	border-radius: var(--border-radius-lg);
	background-color: var(--bg-primary);
	color: var(--text-secondary);
	border: 2px dashed var(--border-color);
	transition: all .25s ease;
	cursor: pointer
}

	.video-generator-ui .vg-start-image:hover {
		border-color: var(--color-accent);
		color: var(--text-primary)
	}

	.video-generator-ui .vg-start-image i {
		font-size: 1.75rem
	}

.video-generator-ui textarea {
	width: 100%;
	background-color: var(--bg-light-panel);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	padding: 12px 16px;
	color: var(--text-primary);
	font-family: inherit;
	font-size: .9rem;
	min-height: 110px;
	resize: vertical;
	transition: all .25s ease
}

	.video-generator-ui textarea:focus {
		border-color: var(--color-accent);
		background-color: var(--bg-primary);
		box-shadow: 0 0 0 3px var(--color-accent-glow);
		outline: none
	}

	.video-generator-ui textarea::placeholder {
		color: var(--text-placeholder)
	}

.video-generator-ui .vg-video-settings {
	display: flex;
	gap: 10px
}

	.video-generator-ui .vg-video-settings > * {
		flex-grow: 1;
		width: 50%
	}

.video-generator-ui .vg-btn-primary {
	background: linear-gradient(45deg,var(--color-accent),#a076f9);
	color: #fff;
	font-weight: 700;
	text-align: center;
	justify-content: center;
	border: none;
	padding: 16px;
	font-size: 1rem;
	box-shadow: 0 4px 15px rgba(142,99,230,.2)
}

	.video-generator-ui .vg-btn-primary:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(142,99,230,.3)
	}

.video-generator-ui details > summary {
	list-style: none
}

	.video-generator-ui details > summary::-webkit-details-marker {
		display: none
	}

	.video-generator-ui details > summary .vg-arrow {
		transition: transform .25s ease
	}

.video-generator-ui details[open] > summary .vg-arrow {
	transform: rotate(90deg)
}

.video-generator-ui .vg-custom-dropdown {
	position: relative
}

	.video-generator-ui .vg-custom-dropdown .vg-dropdown-options {
		position: absolute;
		width: 100%;
		margin-top: 8px;
		z-index: 10;
		background: rgba(42,43,47,.8);
		backdrop-filter: blur(10px);
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius-md);
		overflow: hidden;
		animation: vg-fadeIn .2s ease
	}

[data-theme=light] .vg-custom-dropdown .vg-dropdown-options {
	background: hsla(210,14%,98%,.8)
}

.video-generator-ui .vg-custom-dropdown .vg-dropdown-option {
	padding: 12px 16px;
	cursor: pointer;
	font-size: .9rem;
	display: flex;
	align-items: center;
	gap: 12px
}

	.video-generator-ui .vg-custom-dropdown .vg-dropdown-option:hover {
		background-color: var(--color-accent);
		color: #fff
	}

.video-generator-ui .vg-ratio-icon {
	width: 24px;
	height: 24px;
	filter: brightness(0) invert(.85);
	transition: filter .2s ease
}

.video-generator-ui .vg-custom-dropdown .vg-dropdown-option:hover .vg-ratio-icon {
	filter: brightness(0) invert(1)
}

.video-generator-ui .vg-custom-dropdown .vg-selected-value .vg-length-selected-value {
	margin-left: 8px;
	color: var(--text-secondary)
}

.video-generator-ui .vg-advanced-content-wrapper {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px
}

.video-generator-ui .vg-form-group {
	display: flex;
	flex-direction: column;
	gap: 8px
}

	.video-generator-ui .vg-form-group .vg-seed-value-display {
		margin-left: auto;
		color: var(--text-secondary)
	}

.video-generator-ui .vg-custom-seed-container {
	position: relative
}

.video-generator-ui .vg-popover {
	position: absolute;
	bottom: 100%;
	right: -10px;
	margin-bottom: 10px;
	width: 340px;
	background: rgba(42,43,47,.9);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
	padding: 20px;
	z-index: 20;
	box-shadow: 0 10px 30px var(--shadow-color);
	animation: vg-fadeIn .2s ease;
	display: none
}

[data-theme=light] .vg-popover {
	background: hsla(0,0%,100%,.9)
}

.video-generator-ui .vg-popover.active {
	display: flex;
	flex-direction: column;
	gap: 16px
}

.video-generator-ui .vg-popover p {
	font-size: .9rem;
	color: var(--text-secondary);
	line-height: 1.6
}

.video-generator-ui .vg-popover .vg-popover-info {
	font-size: .8rem;
	color: var(--text-placeholder)
}

.video-generator-ui .vg-seed-control {
	display: flex;
	align-items: center;
	gap: 16px;
	background-color: var(--bg-primary);
	padding: 8px 16px;
	border-radius: var(--border-radius-md)
}

	.video-generator-ui .vg-seed-control .vg-seed-label {
		font-weight: 500;
		white-space: nowrap
	}

	.video-generator-ui .vg-seed-control input[type=text] {
		flex-grow: 1;
		background: 0 0;
		border: none;
		outline: none;
		padding: 8px 0;
		color: var(--text-primary);
		text-align: right;
		font-size: 1rem;
		transition: all .25s ease;
		min-width: 50px
	}

.video-generator-ui .vg-toggle-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	flex-shrink: 0
}

	.video-generator-ui .vg-toggle-switch input {
		opacity: 0;
		width: 0;
		height: 0
	}

	.video-generator-ui .vg-toggle-switch .slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--bg-light-panel);
		border-radius: 34px;
		transition: .25s
	}

		.video-generator-ui .vg-toggle-switch .slider:before {
			position: absolute;
			content: "";
			height: 18px;
			width: 18px;
			left: 3px;
			bottom: 3px;
			background-color: #fff;
			border-radius: 50%;
			transition: .25s
		}

	.video-generator-ui .vg-toggle-switch input:checked + .slider {
		background-color: var(--color-accent)
	}

		.video-generator-ui .vg-toggle-switch input:checked + .slider:before {
			transform: translateX(20px)
		}

.video-generator-ui .vg-main-content {
	flex-grow: 1;
	padding: 24px;
	background-color: var(--bg-primary);
	display: flex;
	flex-direction: column;
	gap: 32px
}

.video-generator-ui .vg-main-nav {
	display: flex;
	gap: 10px;
	border-bottom: 1px solid var(--border-color)
}

.video-generator-ui .vg-nav-btn {
	background: 0 0;
	border: none;
	color: var(--text-secondary);
	padding: 12px 16px;
	cursor: pointer;
	font-size: .9rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	transition: all .25s ease
}

	.video-generator-ui .vg-nav-btn:hover {
		color: var(--text-primary)
	}

	.video-generator-ui .vg-nav-btn.active {
		color: var(--text-primary);
		border-bottom-color: var(--color-accent)
	}

.video-generator-ui .vg-tab-content {
	display: none
}

	.video-generator-ui .vg-tab-content.active {
		display: block;
		animation: vg-fadeInContent .5s ease
	}

.video-generator-ui .vg-tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
	gap: 20px;
	margin-bottom: 32px
}

.video-generator-ui .vg-tool-card {
	background-color: var(--bg-tertiary);
	border-radius: var(--border-radius-lg);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border: 1px solid var(--bg-tertiary);
	transition: all .25s ease
}

	.video-generator-ui .vg-tool-card:hover {
		transform: translateY(-4px);
		border-color: var(--border-color)
	}

	.video-generator-ui .vg-tool-card img {
		width: 48px;
		height: 48px;
		object-fit: cover;
		border-radius: var(--border-radius-sm)
	}

	.video-generator-ui .vg-tool-card p {
		color: var(--text-secondary);
		font-size: .9rem
	}

.video-generator-ui .vg-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px
}

.video-generator-ui .vg-filter-pill {
	background-color: var(--bg-light-panel);
	color: var(--text-secondary);
	border: 1px solid var(--border-color);
	border-radius: 20px;
	padding: 8px 16px;
	font-size: .85rem;
	font-weight: 500;
	cursor: pointer;
	transition: all .25s ease
}

	.video-generator-ui .vg-filter-pill:hover {
		color: var(--text-primary);
		border-color: var(--text-secondary)
	}

	.video-generator-ui .vg-filter-pill.active {
		background-color: var(--color-accent);
		color: #fff;
		border-color: var(--color-accent)
	}

.video-generator-ui .vg-video-grid {
	column-gap: 24px;
	column-count: 2
}

.video-generator-ui .vg-video-item {
	position: relative;
	cursor: pointer;
	border-radius: var(--border-radius-lg);
	overflow: hidden;
	transition: transform .25s ease,box-shadow .25s ease;
	margin-bottom: 24px;
	break-inside: avoid
}

	.video-generator-ui .vg-video-item:hover {
		transform: translateY(-4px);
		box-shadow: 0 8px 25px var(--shadow-color)
	}

	.video-generator-ui .vg-video-item img {
		width: 100%;
		height: auto;
		display: block
	}

	.video-generator-ui .vg-video-item::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50%;
		background: linear-gradient(to top,rgba(0,0,0,.8),transparent)
	}

	.video-generator-ui .vg-video-item p {
		position: absolute;
		bottom: 16px;
		left: 16px;
		z-index: 2;
		color: #fff;
		font-weight: 700;
		font-size: 1.1rem
	}

.video-generator-ui .vg-floating-help {
	position: fixed;
	bottom: 24px;
	right: 24px;
	background-color: var(--bg-light-panel);
	color: var(--text-primary);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	cursor: pointer;
	box-shadow: 0 4px 12px var(--shadow-color)
}

.video-generator-ui .vg-voice-selector {
	position: relative
}

.video-generator-ui .vg-btn-voice-display {
	justify-content: flex-start;
	width: 100%;
	gap: 12px
}

.video-generator-ui .vg-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0
}

.video-generator-ui .vg-voice-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex-grow: 1
}

.video-generator-ui .vg-voice-name {
	font-weight: 700;
	color: var(--text-primary)
}

.video-generator-ui .vg-voice-desc, .video-generator-ui .vg-voice-tags {
	font-size: .8rem;
	color: var(--text-secondary)
}

.video-generator-ui .vg-popover-panel {
	position: absolute;
	width: 100%;
	top: calc(100% + 8px);
	z-index: 30;
	background: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	box-shadow: 0 10px 30px var(--shadow-color);
	overflow: hidden;
	display: none;
	animation: vg-fadeIn .2s ease
}

	.video-generator-ui .vg-popover-panel.active {
		display: block
	}

.video-generator-ui .vg-popover-header {
	padding: 12px;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	gap: 8px
}

	.video-generator-ui .vg-popover-header i {
		color: var(--text-placeholder)
	}

	.video-generator-ui .vg-popover-header input {
		width: 100%;
		background: 0 0;
		border: none;
		outline: none;
		color: var(--text-primary);
		font-size: .9rem
	}

.video-generator-ui .vg-voice-list {
	max-height: 250px;
	overflow-y: auto;
	padding: 8px
}

.video-generator-ui .vg-voice-card {
	display: flex;
	align-items: center;
	padding: 12px;
	border-radius: var(--border-radius-sm);
	cursor: pointer;
	transition: background-color .25s
}

	.video-generator-ui .vg-voice-card:hover {
		background-color: var(--bg-light-panel)
	}

.video-generator-ui .vg-voice-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px
}

.video-generator-ui .vg-tag {
	background-color: var(--bg-light-panel);
	color: var(--text-secondary);
	font-size: .7rem;
	padding: 2px 6px;
	border-radius: 4px
}

.video-generator-ui .vg-btn-icon {
	background: 0 0;
	border: none;
	color: var(--text-secondary);
	padding: 8px;
	margin-left: auto;
	cursor: pointer;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .25s
}

	.video-generator-ui .vg-btn-icon:hover {
		background-color: var(--bg-primary);
		color: var(--text-primary)
	}

.video-generator-ui .vg-textarea-wrapper {
	position: relative
}

.video-generator-ui .vg-char-counter {
	position: absolute;
	bottom: 12px;
	right: 16px;
	font-size: .8rem;
	color: var(--text-placeholder)
}

.video-generator-ui textarea:focus + .vg-char-counter {
	color: var(--text-secondary)
}

.video-generator-ui .vg-label-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: .9rem;
	margin-bottom: 8px
}

	.video-generator-ui .vg-label-group label {
		font-weight: 500
	}

	.video-generator-ui .vg-label-group span {
		color: var(--text-secondary)
	}

.video-generator-ui .vg-slider {
	-webkit-appearance: none;
	width: 100%;
	height: 6px;
	background: var(--bg-primary);
	outline: none;
	border-radius: 3px
}

	.video-generator-ui .vg-slider::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 18px;
		height: 18px;
		background: #fff;
		cursor: pointer;
		border-radius: 50%;
		border: 3px solid var(--color-accent);
		transition: transform .2s
	}

		.video-generator-ui .vg-slider::-webkit-slider-thumb:hover {
			transform: scale(1.1)
		}

.video-generator-ui .vg-audio-output-list {
	display: flex;
	flex-direction: column;
	gap: 24px
}

.video-generator-ui .vg-audio-player-card {
	background-color: var(--bg-tertiary);
	padding: 20px;
	border-radius: var(--border-radius-lg);
	border: 1px solid var(--border-color);
	display: flex;
	flex-direction: column;
	gap: 16px;
	animation: vg-fadeInContent .5s
}

	.video-generator-ui .vg-audio-player-card .vg-card-header {
		display: flex;
		align-items: center;
		gap: 12px;
		justify-content: space-between
	}

.video-generator-ui .vg-script-preview {
	color: var(--text-secondary);
	font-style: italic;
	font-size: .95rem;
	max-width: 100%
}

.video-generator-ui audio {
	width: 100%;
	filter: invert(.8) sepia(.5) saturate(5) hue-rotate(220deg) !important
}

[data-theme=light] audio {
	filter: none
}

.video-generator-ui .vg-card-footer {
	display: flex;
	gap: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--border-color)
}

	.video-generator-ui .vg-card-footer a {
		text-decoration: auto
	}

	.video-generator-ui .vg-card-footer .vg-btn-icon {
		margin-left: 0;
		gap: 8px;
		width: auto;
		height: auto;
		padding: 8px 12px;
		border-radius: var(--border-radius-sm)
	}

.video-generator-ui .vg-audio-player-card.generating {
	align-items: center;
	justify-content: center;
	min-height: 150px;
	text-align: center
}

.video-generator-ui .vg-spinner {
	border: 4px solid var(--bg-light-panel);
	border-top: 4px solid var(--color-accent);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: vg-spin 1s linear infinite
}

.video-generator-ui .vg-prompt-area {
	background-color: var(--bg-light-panel);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	padding: 4px;
	position: relative
}

	.video-generator-ui .vg-prompt-area.dragover {
		border-color: var(--color-accent);
		box-shadow: 0 0 0 3px var(--color-accent-glow)
	}

	.video-generator-ui .vg-prompt-area textarea {
		min-height: 150px;
		padding: 12px;
		background-color: transparent;
		border: none;
		resize: none;
		/* Firefox scrollbar */
		scrollbar-width: thin;
		scrollbar-color: #555 transparent;
	}

		.video-generator-ui .vg-prompt-area textarea:focus {
			box-shadow: none
		}

		.video-generator-ui .vg-prompt-area textarea:not(:placeholder-shown) + .vg-placeholder-upload-link {
			display: none
		}

.video-generator-ui .vg-ai-prompt-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	font-size: .9rem;
	color: var(--text-secondary)
}

.video-generator-ui .vg-toggle-label-group {
	display: flex;
	align-items: center;
	gap: 12px
}

	.video-generator-ui .vg-toggle-label-group .vg-toggle-switch {
		transform: scale(.9)
	}

.video-generator-ui .vg-btn-block {
	width: 100%;
	justify-content: space-between
}

	.video-generator-ui .vg-btn-block .vg-btn-label {
		margin-right: auto;
		margin-left: 12px;
		color: var(--text-primary);
		font-weight: 500
	}

	.video-generator-ui .vg-btn-block .vg-btn-value {
		color: var(--text-secondary)
	}

.video-generator-ui .vg-settings-row {
	display: flex;
	gap: 10px
}

.video-generator-ui .vg-btn-ratio .vg-btn-length, .video-generator-ui .vg-image-counter {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--bg-light-panel);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	padding: 12px 16px;
	font-size: .9rem;
	gap: 10px
}

.video-generator-ui .vg-counter-btn {
	background: 0 0;
	border: none;
	color: var(--text-primary);
	font-size: 1.5rem;
	font-weight: 400;
	cursor: pointer;
	line-height: 1
}

.video-generator-ui .vg-image-count-value {
	font-size: 1rem;
	font-weight: 700
}

.video-generator-ui .vg-btn-ratio {
	padding-top: 13px;
	padding-bottom: 13px
}

.video-generator-ui .vg-placeholder-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 300px;
	color: var(--text-secondary);
	background-color: var(--bg-tertiary);
	border-radius: var(--border-radius-lg)
}

	.video-generator-ui .vg-placeholder-content i {
		font-size: 3rem;
		margin-bottom: 1rem
	}

.video-generator-ui .vg-popover-panel.large {
	position: absolute;
	top: 105px;
	left: calc(380px + 10px);
	width: 360px;
	z-index: 50;
	overflow: visible;
	background: 0 0;
	border: none;
	box-shadow: none;
	height: auto;
	max-height: none;
	display: none
}

	.video-generator-ui .vg-popover-panel.large.active {
		display: block
	}

.video-generator-ui #vg-model-panel-main {
	position: relative;
	width: 100%;
	background: var(--bg-quaternary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
	box-shadow: 0 10px 30px var(--shadow-color);
	max-height: 75vh;
	overflow-y: auto
}

[data-theme=light] #vg-model-panel-main {
	background: #fafafb
}

.video-generator-ui .vg-model-panel-sub {
	position: absolute;
	top: 0;
	left: calc(100% + 10px);
	width: 360px;
	background: var(--bg-quaternary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
	box-shadow: 0 10px 30px var(--shadow-color);
	height: auto;
	overflow-y: auto;
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s ease,transform .2s ease;
	transform: translateY(10px)
}

[data-theme=light] .vg-model-panel-sub {
	background: #fafafb
}

.video-generator-ui .vg-model-panel-sub.active {
	visibility: visible;
	opacity: 1;
	transform: translateY(0)
}

.video-generator-ui .vg-model-option-group.active-group {
	background-color: var(--bg-light-panel)
}

.video-generator-ui .vg-model-panel {
	padding: 8px;
	width: 100%;
	max-height: calc(100vh - 150px);
	overflow-y: auto
}

.video-generator-ui .vg-model-list {
	list-style: none;
	padding: 0;
	margin: 0
}

.video-generator-ui .vg-model-option, .video-generator-ui .vg-model-option-group {
	padding: 12px;
	border-radius: var(--border-radius-sm);
	cursor: pointer;
	transition: background-color .25s;
	display: flex;
	align-items: center;
	justify-content: space-between
}

	.video-generator-ui .vg-model-option-group:hover, .video-generator-ui .vg-model-option:hover {
		background-color: var(--bg-light-panel)
	}

.video-generator-ui .vg-model-main {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-grow: 1
}

.video-generator-ui .vg-model-icon {
	font-size: 1.1rem;
	color: var(--text-secondary);
	width: 20px;
	text-align: center
}

.video-generator-ui .vg-model-info {
	display: flex;
	flex-direction: column
}

.video-generator-ui .vg-model-name {
	font-weight: 500;
	color: var(--text-primary);
	display: flex;
	align-items: center
}

	.video-generator-ui .vg-model-name.sub-item {
		margin-left: 28px
	}

	.video-generator-ui .vg-model-name .fa-crown {
		color: #f39c12;
		font-size: .8em;
		margin-left: 6px
	}

.video-generator-ui .vg-model-desc {
	font-size: .85rem;
	color: var(--text-secondary);
	margin-top: 2px
}

.video-generator-ui .vg-sub-panel-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	font-weight: 700;
	border-bottom: 1px solid var(--border-color);
	margin: -8px -8px 8px;
	background-color: inherit
}

	.video-generator-ui .vg-sub-panel-header .back-btn {
		cursor: pointer;
		color: var(--text-secondary)
	}

		.video-generator-ui .vg-sub-panel-header .back-btn:hover {
			color: var(--text-primary)
		}

.video-generator-ui .vg-badge {
	font-size: .65rem;
	font-weight: 700;
	padding: 3px 6px;
	border-radius: 6px;
	margin-left: 8px;
	text-transform: uppercase;
	line-height: 1.2
}

	.video-generator-ui .vg-badge.new {
		background-color: rgba(142,99,230,.2);
		color: var(--color-accent)
	}

	.video-generator-ui .vg-badge.pro {
		background-color: rgba(243,156,18,.2);
		color: #f39c12
	}

.video-generator-ui .vg-arrow, .video-generator-ui .vg-checkmark {
	color: var(--text-secondary)
}

.video-generator-ui .vg-model-option-group.selected .vg-arrow, .video-generator-ui .vg-model-option.selected .vg-checkmark {
	color: var(--color-accent)
}

.video-generator-ui .vg-checkmark {
	visibility: hidden
}

.video-generator-ui .vg-model-option.selected .vg-checkmark {
	visibility: visible
}

.video-generator-ui .vg-prompt-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 8px
}

.video-generator-ui .vg-upload-btn {
	background: 0 0;
	border: none;
	color: var(--text-secondary);
	font-size: 1rem;
	cursor: pointer;
	padding: 8px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .25s ease
}

	.video-generator-ui .vg-upload-btn:hover {
		color: var(--text-primary);
		background-color: var(--bg-primary)
	}

.video-generator-ui .vg-image-preview-container {
	position: relative;
	width: 100%;
	max-width: 300px;
	margin: 0 auto
}

	.video-generator-ui .vg-image-preview-container img {
		width: 100%;
		height: auto;
		border-radius: var(--border-radius-lg);
		border: 1px solid var(--border-color)
	}

.video-generator-ui .vg-remove-image-btn {
	position: absolute;
	top: -10px;
	right: -10px;
	background-color: var(--bg-light-panel);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	font-size: .9rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 5px rgba(0,0,0,.2);
	transition: all .25s ease
}

	.video-generator-ui .vg-remove-image-btn:hover {
		transform: scale(1.1);
		background-color: var(--color-red-danger);
		border-color: var(--color-red-danger);
		color: #fff
	}

.video-generator-ui .vg-placeholder-upload-link {
	position: absolute;
	top: 13px;
	left: 178px;
	color: var(--color-accent);
	cursor: pointer;
	font-size: .9rem;
	font-weight: 500;
	z-index: 1;
	transition: color .2s
}

	.video-generator-ui .vg-placeholder-upload-link:hover {
		color: #a888f0
	}

.video-generator-ui #vg-sidebar-preview-container .vg-image-preview-container {
	position: relative;
	width: 100%
}

.video-generator-ui #vg-sidebar-preview-container img {
	width: 100%;
	/*height: auto;*/
	border-radius: var(--border-radius-md);
	border: 1px solid var(--border-color);
	max-height: 250px;
	object-fit: cover
}

.video-generator-ui #vg-sidebar-preview-container .vg-remove-image-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	background-color: rgba(13,13,15,.7);
	backdrop-filter: blur(5px);
	color: var(--text-primary);
	border: 1px solid hsla(0,0%,100%,.1);
	border-radius: 50%;
	width: 20px;
	height: 20px;
	font-size: .7rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .25s ease
}

	.video-generator-ui #vg-sidebar-preview-container .vg-remove-image-btn:hover {
		transform: scale(1.1);
		background-color: var(--color-red-danger);
		border-color: var(--color-red-danger)
	}

.video-generator-ui .vg-btn-primary.loading {
	opacity: .6;
	pointer-events: none;
	position: relative
}

	.video-generator-ui .vg-btn-primary.loading::after {
		content: '';
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		width: 16px;
		height: 16px;
		border: 2px solid #fff;
		border-top: 2px solid #666;
		border-radius: 50%;
		animation: spin .8s linear infinite
	}

.video-generator-ui .vg-history-gallery {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%
}

.video-generator-ui .vg-generation-group {
	display: flex;
	flex-direction: column;
	gap: 16px
}

.video-generator-ui .vg-generation-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px
}

.video-generator-ui .vg-prompt-text {
	color: var(--text-primary);
	font-size: .9rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-grow: 1;
	min-width: 0;
	max-width: 534px
}

.video-generator-ui .vg-generation-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0
}

.video-generator-ui .vg-meta-badge {
	background-color: var(--bg-light-panel);
	color: var(--text-secondary);
	font-size: .75rem;
	font-weight: 500;
	padding: 4px 8px;
	border-radius: 6px
}

.video-generator-ui .vg-meta-date {
	color: var(--text-secondary);
	font-size: .85rem
}

.video-generator-ui .vg-meta-checkbox {
	position: relative;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	display: flex;
	align-items: center
}

	.video-generator-ui .vg-meta-checkbox input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0
	}

	.video-generator-ui .vg-meta-checkbox .checkmark {
		height: 18px;
		width: 18px;
		background-color: transparent;
		border: 1.5px solid var(--text-secondary);
		border-radius: 4px;
		transition: all .2s ease
	}

	.video-generator-ui .vg-meta-checkbox:hover input ~ .checkmark {
		background-color: var(--bg-light-panel)
	}

	.video-generator-ui .vg-meta-checkbox input:checked ~ .checkmark {
		background-color: var(--color-accent);
		border-color: var(--color-accent)
	}

	.video-generator-ui .vg-meta-checkbox .checkmark:after {
		content: "";
		position: absolute;
		display: none;
		left: 6px;
		top: 2px;
		width: 5px;
		height: 10px;
		border: solid #fff;
		border-width: 0 2px 2px 0;
		transform: rotate(45deg)
	}

	.video-generator-ui .vg-meta-checkbox input:checked ~ .checkmark:after {
		display: block
	}

.video-generator-ui .vg-image-grid {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 16px
}

.video-generator-ui .vg-image-item {
	border-radius: var(--border-radius-md);
	overflow: hidden;
	background-color: var(--bg-tertiary);
	position: relative
}

	.video-generator-ui .vg-image-item img, .video-generator-ui .vg-image-item video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block
	}

.video-generator-ui .vg-image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	background: linear-gradient(to top,rgba(0,0,0,.5) 0,transparent 40%);
	opacity: 0;
	transition: opacity .25s ease-in-out;
	pointer-events: none
}

.video-generator-ui .vg-image-item:hover .vg-image-overlay {
	opacity: 1;
	pointer-events: auto
}

.video-generator-ui .vg-image-item:hover {
	overflow: visible;
	z-index: 10
}

.video-generator-ui .vg-image-controls {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px
}

.video-generator-ui .vg-control-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background-color: var(--bg-primary);
	backdrop-filter: blur(5px);
	border: 1px solid hsla(0,0%,100%,.1);
	color: var(--text-primary);
	border-radius: 8px;
	cursor: pointer;
	font-size: .9rem;
	transition: background-color .2s ease
}

	.video-generator-ui .vg-control-btn:hover {
		background-color: var(--bg-light-panel)
	}

.video-generator-ui .vg-more-options-container {
	position: relative
}

.video-generator-ui .vg-popover-menu {
	position: absolute;
	top: 0;
	left: calc(100% + 8px);
	width: 200px;
	background-color: var(--bg-light-panel);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	box-shadow: 0 5px 15px rgba(0,0,0,.3);
	padding: 8px;
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	transform: translateY(5px);
	transition: opacity .2s ease,transform .2s ease,visibility 0s .2s
}

.video-generator-ui .vg-more-options-container:hover .vg-popover-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .2s ease,transform .2s ease
}

.video-generator-ui .vg-popover-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border-radius: 6px;
	color: var(--text-primary);
	font-size: .9rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease
}

	.video-generator-ui .vg-popover-item:hover {
		background-color: var(--bg-tertiary)
	}

	.video-generator-ui .vg-popover-item i {
		width: 16px;
		text-align: center;
		color: var(--text-secondary)
	}

.video-generator-ui .vg-popover-delete, .video-generator-ui .vg-popover-delete i {
	color: var(--color-red-danger)
}

	.video-generator-ui .vg-popover-delete:hover {
		background-color: rgba(231,76,60,.1)
	}

.video-generator-ui .vg-prompt-container {
	position: relative;
	min-height: 40px
}

.video-generator-ui .vg-prompt-hover-details, .video-generator-ui .vg-generation-header {
	transition: opacity .2s ease-in-out
}

.video-generator-ui .vg-prompt-hover-details {
	position: absolute;
	top: 0;
	left: 0;
	width: 70%;
	height: auto;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	background-color: var(--bg-primary);
	border-radius: 8px;
	box-shadow: 0 5px 15px rgba(0,0,0,.3);
	opacity: 0;
	visibility: hidden;
	pointer-events: none
}

.video-generator-ui .vg-prompt-container:hover .vg-prompt-hover-details {
	opacity: 1;
	visibility: visible;
	pointer-events: auto
}

.video-generator-ui .vg-full-prompt-display {
	color: var(--text-primary);
	font-size: .7rem;
	line-height: 1.6;
	height: auto
}

.video-generator-ui .vg-prompt-actions {
	display: flex;
	gap: 12px
}

.video-generator-ui .vg-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--bg-light-panel);
	border: none;
	color: var(--text-primary);
	padding: 8px 16px;
	border-radius: 8px;
	font-size: .85rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .2s ease
}

	.video-generator-ui .vg-action-btn:hover {
		background-color: var(--bg-tertiary)
	}

.video-generator-ui .vg-generation-group:last-child .vg-prompt-hover-details {
	top: auto;
	bottom: 0 !important
}

.video-generator-ui .vg-image-item-loading {
	background-color: var(--bg-tertiary);
	border-radius: var(--border-radius-md);
	display: flex;
	align-items: center;
	justify-content: center
}

.video-generator-ui .vg-toast-container {
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 12px
}

.video-generator-ui .vg-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	max-width: 420px;
	background-color: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	border-left-width: 4px;
	border-radius: var(--border-radius-md);
	box-shadow: 0 5px 15px rgba(0,0,0,.3);
	color: var(--text-primary);
	font-weight: 500;
	animation: vg-toast-in .3s ease-out forwards;
	opacity: 0
}

	.video-generator-ui .vg-toast.fade-out {
		animation: vg-toast-out .3s ease-in forwards
	}

	.video-generator-ui .vg-toast i {
		font-size: 1.2rem
	}

	.video-generator-ui .vg-toast.success {
		border-left-color: #2ecc71
	}

		.video-generator-ui .vg-toast.success i {
			color: #2ecc71
		}

	.video-generator-ui .vg-toast.error {
		border-left-color: var(--color-red-danger)
	}

		.video-generator-ui .vg-toast.error i {
			color: var(--color-red-danger)
		}

.video-generator-ui .vg-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.6);
	backdrop-filter: blur(5px);
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease,visibility 0s .2s
}

	.video-generator-ui .vg-modal-overlay.active {
		opacity: 1;
		visibility: visible;
		transition: opacity .2s ease
	}

.video-generator-ui .vg-modal-content {
	background-color: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
	padding: 24px;
	width: 90%;
	max-width: 420px;
	box-shadow: 0 10px 30px rgba(0,0,0,.4);
	transform: scale(.95);
	transition: transform .2s ease
}

.video-generator-ui .vg-modal-overlay.active .vg-modal-content {
	transform: scale(1)
}

.video-generator-ui .vg-modal-content h3 {
	margin-bottom: 8px;
	font-size: 1.2rem;
	color: var(--text-primary)
}

.video-generator-ui .vg-modal-content p {
	margin-bottom: 24px;
	color: var(--text-secondary);
	line-height: 1.6
}

.video-generator-ui .vg-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px
}

.video-generator-ui .vg-modal-btn {
	padding: 10px 20px;
	border-radius: var(--border-radius-md);
	font-weight: 700;
	cursor: pointer;
	border: none;
	transition: background-color .2s,transform .1s
}

	.video-generator-ui .vg-modal-btn:active {
		transform: scale(.98)
	}

.video-generator-ui .vg-btn-secondary {
	background-color: var(--bg-light-panel);
	color: var(--text-primary)
}

	.video-generator-ui .vg-btn-secondary:hover {
		background-color: var(--border-color)
	}

.video-generator-ui .vg-btn-danger {
	background-color: var(--color-red-danger-dark);
	color: #fff
}

	.video-generator-ui .vg-btn-danger:hover {
		background-color: var(--color-red-danger)
	}

.vg-load-more-container {
	display: flex;
	justify-content: center;
	margin-top: 32px;
	width: 100%
}

#load-more-btn {
	min-width: 150px;
	justify-content: center;
	background-color: var(--bg-light-panel);
	color: var(--text-primary);
	border: 1px solid var(--border-color)
}

	#load-more-btn:hover {
		background-color: var(--border-color)
	}

	#load-more-btn.loading {
		opacity: .7;
		pointer-events: none;
		position: relative;
		color: transparent
	}

		#load-more-btn.loading > * {
			visibility: hidden
		}

		#load-more-btn.loading::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 20px;
			height: 20px;
			border: 3px solid var(--text-primary);
			border-top-color: transparent;
			border-radius: 50%;
			animation: vg-spin .8s linear infinite
		}

.vg-error-text {
	color: #b65555;
	font-size: 15px;
	text-align: center;
	padding: 10px;
	font-weight: 500
}

.advanced-settings {
	background-color: var(--bg-light-panel);
	border-radius: var(--border-radius-md)
}

@keyframes typingAnimation {
	0%,60%,100% {
		transform: translateY(0);
		opacity: .4
	}

	30% {
		transform: translateY(-4px);
		opacity: 1
	}
}

@keyframes vg-spin {
	0% {
		transform: rotate(0)
	}

	100% {
		transform: rotate(360deg)
	}
}

@keyframes spin {
	0% {
		transform: translateY(-50%) rotate(0)
	}

	100% {
		transform: translateY(-50%) rotate(360deg)
	}
}

@keyframes vg-fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

@keyframes vg-fadeInContent {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes vg-slideUp {
	from {
		transform: translateY(100%)
	}

	to {
		transform: translateY(0)
	}
}

@keyframes vg-toast-in {
	from {
		opacity: 0;
		transform: translateX(100%)
	}

	to {
		opacity: 1;
		transform: translateX(0)
	}
}

@keyframes vg-toast-out {
	from {
		opacity: 1;
		transform: translateX(0)
	}

	to {
		opacity: 0;
		transform: translateX(100%)
	}
}

@media (max-width:768px) {
	.chatbot-navbar {
		left: 0;
		padding: 8px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 1000
	}

	.chat-input-area {
		left: 0;
		padding: 12px
	}

	.chatbot-main-content {
		margin-left: 0
	}

	.chat-message {
		margin: 10px;
		padding: 15px
	}

	.user-message {
		min-width: 150px
	}

	.message-icon {
		width: 24px;
		height: 24px;
		font-size: 14px
	}

	.bot-message .message-icon {
		margin-right: 8px
	}

	.user-message .message-icon {
		margin-left: 8px
	}

	.chatbot-sidebar {
		transform: translateX(-100%);
		transition: transform .3s ease;
		width: 100%;
		max-width: 320px;
		background-color: var(--bg-secondary);
		z-index: 1001
	}

		.chatbot-sidebar.active {
			transform: translateX(0)
		}

	.navbar-right {
		display: flex;
		gap: 8px
	}

	.model-selector {
		margin-left: 8px;
		max-width: 120px
	}

	.model-select-btn {
		padding: 6px 8px;
		font-size: 13px
	}

	.navbar-button {
		padding: 6px 8px;
		font-size: 13px
	}

		.navbar-button i {
			margin-right: 4px
		}

	.mobile-menu-button {
		display: block
	}

	.prompt-actions {
		overflow-x: auto;
		padding-bottom: 8px;
		-ms-overflow-style: none;
		scrollbar-width: none
	}

		.prompt-actions::-webkit-scrollbar {
			display: none
		}

	.action-button {
		white-space: nowrap;
		padding: 6px 10px;
		font-size: 13px
	}

	.chat-input-container {
		padding: 0
	}

	.prompt-container {
		border-radius: 8px
	}

	.model-dropdown {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		border: none;
		border-radius: 0;
		background-color: var(--bg-primary)
	}

	.model-dropdown-header {
		padding: 16px;
		background-color: var(--bg-primary);
		position: sticky;
		top: 0;
		z-index: 1
	}

	.model-options-container {
		max-height: none;
		height: calc(100% - 53px)
	}

	.model-name {
		font-size: 15px;
		margin-bottom: 6px
	}

	.model-description {
		font-size: 13px
	}

	.sidebar-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.5);
		z-index: 99
	}

		.sidebar-overlay.active {
			display: block
		}

	.empty-chat-state {
		padding: 16px
	}

		.empty-chat-state h1 {
			font-size: 2rem;
			margin-bottom: 1.5rem
		}

		.empty-chat-state .chat-input-container {
			max-width: 100%
		}

		.empty-chat-state .action-button {
			padding: 6px 10px;
			font-size: 13px
		}

	.video-generator-ui .vg-popover-panel.large {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		border-radius: 0;
		z-index: 100;
		max-height: 100%;
		animation: vg-slideUp .3s ease-out;
		background-color: var(--bg-secondary)
	}

	.video-generator-ui .vg-model-panel-sub {
		left: auto;
		width: -webkit-fill-available
	}

	.video-generator-ui .vg-sub-panel-header {
		position: sticky;
		top: -8px;
		z-index: 1
	}

	#vg-model-panel-sub {
		height: 100vh
	}

	.video-generator-ui .vg-meta-badge {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 120px
	}

	.video-generator-ui .vg-generation-header {
		display: contents
	}
}

@media (max-width:480px) {
	.vg-card-header {
		display: contents !important
	}

	.video-generator-ui .vg-generation-meta {
		display: flow
	}

	.model-selector {
		max-width: 80px
	}

	.navbar-button span {
		display: none
	}

	.navbar-button {
		padding: 6px
	}

		.navbar-button i {
			margin-right: 0
		}

	.action-button {
		padding: 4px 8px;
		font-size: 12px
	}

	.chat-message {
		margin: 8px;
		padding: 12px
	}

	.model-dropdown {
		width: 260px
	}

	.chat-input-area {
		padding: 8px
	}
}

@media (min-width:768px) {
	.video-generator-ui .vg-image-grid {
		grid-template-columns: repeat(4,1fr)
	}

	.blog-generator-container {
		flex-direction: row;
		justify-content: center
	}

	.blog-input-card, .blog-output-card {
		width: 500px
	}

	.video-generator-ui .vg-video-grid {
		column-count: 3
	}
}

@media (min-width:1024px) {
	.video-generator-ui .vg-app-container {
		flex-direction: row;
		height: 100vh;
		overflow: hidden
	}

	.video-generator-ui .vg-icon-nav {
		flex-direction: column;
		width: 90px;
		border-bottom: none;
		border-right: 1px solid var(--border-color);
		justify-content: flex-start;
		padding: 16px 0
	}

	.video-generator-ui .vg-icon-nav-item.active::before {
		display: block
	}

	.video-generator-ui .vg-sidebar {
		width: 380px;
		flex-shrink: 0;
		border-right: 1px solid var(--border-color);
		height: 100%;
		overflow-y: auto
	}

	.video-generator-ui .vg-main-content {
		padding: 32px 48px;
		height: 100%;
		overflow-y: auto
	}

	.video-generator-ui .vg-popover {
		position: fixed;
		right: auto;
		left: 410px;
		bottom: auto;
		top: 270px;
		margin-bottom: 0;
		margin-left: 10px
	}

	.video-generator-ui .vg-video-grid {
		column-count: 3
	}
}

@media (min-width:1440px) {
	.video-generator-ui .vg-video-grid {
		column-count: 4
	}
}




/*------------------------------------*\
          #HEADER & NAVIGATION
        \*------------------------------------*/
.main-header {
	padding: 1rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--border-color);
	background-color: var(--bg-primary);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: background-color var(--transition-main), border-color var(--transition-main)
}

.header-left,
.header-right,
.header-center nav {
	display: flex;
	align-items: center;
	gap: 1.5rem
}

.header-left {
	gap: 1rem
}

.header-right {
	gap: 1rem
}

.logo-container .logo {
	display: inline-block; /* Or block, depending on your layout */
	line-height: 0; /* Prevents extra space under the image */
}

.logo {
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -1px
}

	.logo img {
		max-width: 40%;
	}

.logo-light-theme {
	display: none;
}

.logo-dark-theme {
	display: block;
}

[data-theme="light"] .logo-light-theme {
	display: block;
}

[data-theme="light"] .logo-dark-theme {
	display: none;
}

.menu-btn {
	display: none;
	background: none;
	border: none;
	color: var(--text-primary);
	font-size: 1.2rem;
	cursor: pointer
}

.nav-link {
	font-size: .95rem;
	font-weight: 500;
	color: var(--text-secondary);
	padding: .5rem 1rem;
	border-radius: var(--border-radius-sm);
	transition: var(--transition-main);
	background: none;
	border: none;
	cursor: pointer
}

	.nav-link.active,
	.nav-link:hover {
		color: var(--text-primary);
		background-color: var(--bg-card)
	}

.nav-link-pricing {
	color: var(--text-accent);
	font-weight: 600
}


.profile-avatar {
	width: 36px;
	height: 36px;
	background-color: #444;
	border-radius: 50%;
	cursor: pointer;
	background-image: url(https://i.pravatar.cc/36)
}

@media (max-width:992px) {
	.header-center {
		display: none
	}

	.menu-btn {
		display: block
	}
}

@media (max-width:768px) {
	.main-header {
		padding: 1rem
	}
}


/*------------------------------------*\
          #BASE & RESET
        \*------------------------------------*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}


img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

.hidden {
	display: none !important;
}




/*------------------------------------*\
          #MAIN CONTENT & SECTIONS
        \*------------------------------------*/
main {
	padding: 2.5rem 2rem;
}

.section-container {
	margin-bottom: 4rem;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
	gap: 1rem;
}

.section-title {
	font-size: 1.5rem;
	font-weight: 600;
}

.view-all-link {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text-secondary);
	transition: color var(--transition-main);
}

	.view-all-link:hover {
		color: var(--text-primary);
	}

/*------------------------------------*\
          #FILTER PILLS
        \*------------------------------------*/
.filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.pill {
	padding: 0.6rem 1.2rem;
	border-radius: 99px;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition: var(--transition-main);
	border: 1px solid var(--border-color);
	background-color: transparent;
	color: var(--text-inactive-pill);
}

	.pill:hover {
		background-color: var(--bg-card);
		border-color: var(--bg-card);
	}

	.pill.active {
		background-color: var(--bg-pill-active);
		color: var(--text-active-pill);
		border-color: var(--bg-pill-active);
	}

	/* Specific pill styles for non-filtering pills */
	.pill.promo-style {
		background-color: var(--bg-pill-inactive);
		border-color: var(--bg-pill-inactive);
	}

		.pill.promo-style:hover {
			filter: brightness(1.1);
		}

/*------------------------------------*\
          # TOOLS & CREATIONS GRIDS
        \*------------------------------------*/
.tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem
}

.tool-card {
	background-color: var(--bg-card);
	border-radius: var(--border-radius-lg);
	padding: 1rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	transition: background-color var(--transition-main), transform var(--transition-main);
	min-height: 96px
}

	.tool-card:hover {
		background-color: var(--bg-card-hover);
		transform: translateY(-4px)
	}

.tool-card-img-wrapper {
	width: 80px;
	height: 80px;
	border-radius: var(--border-radius-md);
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bg-quaternary); /* A light background for the icon area */
	color: var(--text-primary); /* Default icon color, can be overridden */
	font-size: 2.2rem; /* Adjust icon size */
}

	.tool-card-img-wrapper video {
		width: 180%;
		height: 100%;
		object-fit: contain; /* Changed from 'cover' to fix "too zoom" by showing the full video */
		display: block; /* Ensures the video behaves as a block element */
	}

	.tool-card-img-wrapper img {
		width: 100%;
		height: 100%;
		object-fit: cover
	}

	.tool-card-img-wrapper i {
		/* Ensure icon inherits color or define it explicitly */
		color: inherit;
		transition: color 0.3s ease; /* Smooth transition for icon color on hover */
	}

	.tool-card-img-wrapper img,
	.tool-card-img-wrapper video {
		transition: transform 0.3s ease; /* Apply transition for a smooth zoom animation */
	}

	.tool-card-img-wrapper:hover img,
	.tool-card-img-wrapper:hover video {
		transform: scale(1.3); /* Zoom in by 5% on hover of the image/video container */
	}

/* Optional: change icon color on tool-card hover */
.tool-card:hover .tool-card-img-wrapper i {
	color: var(--color-accent); /* E.g., make icon accent-colored on hover */
}

/* Hide the Font Awesome icon from the H3 now that it's in the image wrapper */
.tool-card-content h3 i {
	display: none;
}
/* Style for hidden tools */
.tool-card.hidden-tool {
	display: none;
}

/* Styling for the toggle button */
#toggleToolsBtn {
	/* Inherits btn-purple styles */
	min-width: 200px; /* Give it a consistent width */
	justify-content: center; /* Center content within button */
	gap: 0.5rem; /* Space between text and icon */
}


.tool-card-content h3 {
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: .25rem;
	display: flex;
	align-items: center;
	gap: .5rem
}

.tool-card-content p {
	font-size: .9rem;
	color: var(--text-secondary)
}

.new-badge {
	background-color: var(--text-accent);
	color: var(--bg-main);
	padding: 2px 6px;
	border-radius: 6px;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase
}

.card-overlay-icon {
	position: absolute;
	top: 6px;
	right: 6px;
	background-color: rgba(0, 0, 0, .4);
	color: #fff;
	backdrop-filter: blur(4px);
	border-radius: var(--border-radius-sm);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem
}

.video-editor-images {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 50% 50%;
	gap: 2px
}

	.video-editor-images img:first-child {
		grid-column: 1 / -1
	}

.horizontal-scroll-container {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	padding-bottom: 1.5rem;
	scrollbar-width: thin;
	scrollbar-color: var(--border-color) transparent
}

	.horizontal-scroll-container::-webkit-scrollbar {
		height: 8px
	}

	.horizontal-scroll-container::-webkit-scrollbar-thumb {
		background-color: var(--border-color);
		border-radius: 10px
	}

.creation-card {
	background-color: var(--bg-card);
	border-radius: var(--border-radius-lg);
	overflow: hidden;
	flex: 0 0 280px;
	transition: all var(--transition-main);
	display: flex;
	flex-direction: column;
}

	.creation-card:hover {
		transform: translateY(-4px);
		background-color: var(--bg-card-hover);
	}

.creation-card-img-wrapper {
	width: 100%;
	aspect-ratio: 16 / 9;
	position: relative;
	overflow: hidden;
	background-color: #111;
	/* BG for loading images */
}

	.creation-card-img-wrapper img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.creation-card-content {
	padding: 1rem;
}

.creation-card-title {
	font-weight: 500;
	font-size: 0.95rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 0.3rem;
}

.creation-card-date {
	font-size: 0.85rem;
	color: var(--text-secondary);
}

.card-media-icon {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	backdrop-filter: blur(5px);
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 0.8rem;
	display: flex;
	align-items: center;
	gap: 6px;
}

/*------------------------------------*\
          # STAGGERED & OTHER
        \*------------------------------------*/
.staggered-grid {
	column-count: 4;
	column-gap: 1.5rem
}

.staggered-item {
	margin-bottom: 1.5rem;
	break-inside: avoid;
	border-radius: var(--border-radius-md);
	overflow: hidden;
	transition: transform var(--transition-main), box-shadow var(--transition-main);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0)
}

	.staggered-item:hover {
		transform: scale(1.02);
		box-shadow: 0 10px 25px var(--shadow-color)
	}

	.staggered-item img {
		width: 100%;
		height: auto;
		padding-bottom: 10px;
	}

@media (max-width:1200px) {
	.staggered-grid {
		column-count: 3
	}
}

@media (max-width:768px) {
	.staggered-grid {
		column-count: 2
	}

	main {
		padding: 1.5rem 1rem
	}

	.section-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.tool-search-container {
		width: 100%;
		margin-left: 0;
		margin-top: 1rem; /* Space between title and search */
	}
}

@media (max-width:480px) {
	.staggered-grid {
		column-count: 1
	}
}

.promo-banner {
	background-color: var(--bg-card);
	border-radius: var(--border-radius-md);
	padding: 1.5rem 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	text-align: center
}

.promo-badge {
	background-color: var(--text-accent);
	color: var(--bg-main);
	padding: .25rem .6rem;
	border-radius: 6px;
	font-size: .8rem;
	font-weight: 700
}

.promo-text {
	font-weight: 500
}

.promo-btn {
	background-color: var(--bg-pill-active);
	color: var(--text-active-pill);
	padding: .6rem 1.2rem;
	border-radius: var(--border-radius-sm);
	font-weight: 600;
	font-size: .9rem;
	transition: transform var(--transition-main)
}

	.promo-btn:hover {
		transform: scale(1.05)
	}

.floating-btn {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	width: 50px;
	height: 50px;
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	cursor: pointer;
	box-shadow: 0 4px 15px var(--shadow-color);
	transition: var(--transition-main);
	z-index: 50
}

	.floating-btn:hover {
		background-color: var(--bg-card-hover);
		transform: scale(1.1)
	}


/* Utility classes to visually hide elements but keep them accessible/functional */
.visually-hidden-checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap; /* Ensures it doesn't wrap and take up space */
}

.visually-hidden-slider {
	display: none; /* Hide the slider completely */
}

/* Styles for the new clickable label */
.theme-toggle-label {
	/* Inherit basic nav-link styles for appearance */
	padding: .5rem; /* Reduced padding to make it compact */
	width: 36px; /* Fixed width for a square button */
	height: 36px; /* Fixed height for a square button */
	display: flex; /* Flex to center content */
	align-items: center;
	justify-content: center;
	cursor: pointer; /* Indicate it's clickable */
	background: none; /* No background by default */
	border: none; /* No border by default */
	color: var(--text-secondary); /* Default icon color */
	border-radius: var(--border-radius-sm); /* Keep rounded corners */
	transition: var(--transition-main);
	flex-shrink: 0; /* Prevent it from shrinking in flex containers */
}

	.theme-toggle-label:hover {
		color: var(--text-primary);
		background-color: var(--bg-card); /* Hover background color */
	}

	/* Styles for the icon wrapper (retained from previous, but now inside the label) */
	.theme-toggle-label .vg-theme-icon-wrapper {
		position: relative;
		width: 1.25rem; /* Standard icon width */
		height: 1.25rem; /* Standard icon height */
		flex-shrink: 0; /* Prevent shrinking */
		/* Ensure icons are perfectly centered within the small button area */
		display: flex;
		/*align-items: center;*/
		justify-content: center;
	}

		/* General icon transitions and positioning (retained) */
		.theme-toggle-label .vg-theme-icon-wrapper .fas {
			position: absolute;
			transition: opacity .2s ease, transform .2s ease;
		}

		/* Specific icon colors (retained) */
		.theme-toggle-label .vg-theme-icon-wrapper .fa-sun {
			color: #f39c12; /* Sun icon color */
		}

		.theme-toggle-label .vg-theme-icon-wrapper .fa-moon {
			color: #bdc3c7; /* Moon icon color */
		}

/* Theme-specific icon visibility and transform (retained) */
[data-theme=light] .theme-toggle-label .vg-theme-icon-wrapper .fa-moon {
	opacity: 0;
	transform: scale(.5)
}

[data-theme=light] .theme-toggle-label .vg-theme-icon-wrapper .fa-sun {
	opacity: 1;
	transform: scale(1)
}

[data-theme=dark] .theme-toggle-label .vg-theme-icon-wrapper .fa-sun {
	opacity: 0;
	transform: scale(.5)
}

[data-theme=dark] .theme-toggle-label .vg-theme-icon-wrapper .fa-moon {
	opacity: 1;
	transform: scale(1)
}


/* New rule for image zoom effect on creation cards */
.creation-card-img-wrapper img {
	transition: transform 0.3s ease; /* Smooth transition for zoom */
}

.creation-card-img-wrapper:hover img {
	transform: scale(1.05); /* Zoom in by 5% on hover */
}

/* New rule for video sizing within its wrapper (assuming <video> tag is now used) */
.creation-card-img-wrapper video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block; /* Remove extra space below video */
}

/* Styles for the audio player overlay (for data-category="audio" cards) */
.creation-card-img-wrapper .audio-controls-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50px; /* Height of controls area */
	background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 100%); /* Fade from bottom */
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0; /* Hidden by default */
	transition: opacity 0.3s ease;
	pointer-events: none; /* Allow clicks through when hidden */
}

/* Make audio controls visible on hover of the card */
.creation-card-img-wrapper:hover .audio-controls-overlay {
	opacity: 1; /* Visible on hover */
	pointer-events: auto; /* Enable clicks on controls */
}

/* Style the audio player inside the overlay */
.creation-card-img-wrapper .audio-controls-overlay audio {
	width: calc(100% - 20px); /* Adjust width for padding */
	margin: 0 10px;
	height: 30px; /* Standard height for audio controls */
	filter: invert(.8) sepia(.5) saturate(5) hue-rotate(220deg); /* Match existing audio filter */
}

/* Reset audio filter for light theme */
[data-theme=light] .creation-card-img-wrapper .audio-controls-overlay audio {
	filter: none;
}

/* Optionally hide the existing media icon for audio type if the audio overlay is present */
.audio-creation-card .card-media-icon {
	/*display: none;*/
}



/* Style for the search input */
.tool-search-container {
	width: 100%;
	max-width: 300px; /* Adjust as needed */
	margin-left: auto; /* Push to the right if space allows */
}

	.tool-search-container .search-input {
		width: 100%;
		padding: 0.75rem 1rem;
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius-sm);
		background-color: var(--input-bg); /* Use input-bg variable */
		color: var(--text-primary);
		font-size: 0.95rem;
		transition: all 0.25s ease;
	}

		.tool-search-container .search-input::placeholder {
			color: var(--text-placeholder);
		}

		.tool-search-container .search-input:focus {
			border-color: var(--color-accent);
			box-shadow: 0 0 0 3px var(--color-accent-glow);
			outline: none;
		}

/*------------------------------------*\
          # NO TOOL FOUND PAGE
        \*------------------------------------*/
.no-tool-found-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 100px); /* Adjusted for typical header/footer space */
	text-align: center;
	padding: 2rem;
	background-color: var(--bg-primary);
	color: var(--text-primary);
}

.no-tool-found-icon {
	font-size: 5rem; /* Large icon to catch attention */
	color: var(--text-placeholder); /* Muted color, or use --color-accent for prominence */
	margin-bottom: 1.5rem;
}

.no-tool-found-title {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 1rem;
	color: var(--text-primary);
}

.no-tool-found-description {
	font-size: 1.1rem;
	color: var(--text-secondary);
	max-width: 600px;
	margin-bottom: 2rem;
	line-height: 1.6;
}

.no-tool-found-btn {
	/* Reusing common button styles for consistency */
	background-color: var(--color-purple);
	color: #fff;
	border-radius: var(--border-radius-pill);
	padding: .75rem 1.5rem;
	transition: background-color var(--transition-main);
	display: inline-flex;
	align-items: center;
	text-decoration: none; /* Ensure no underline on the link */
	font-weight: 600; /* Match btn-purple's general feel */
}

	.no-tool-found-btn:hover {
		background-color: var(--color-purple-hover);
		color: #fff;
	}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
	.no-tool-found-icon {
		font-size: 4rem;
	}

	.no-tool-found-title {
		font-size: 2rem;
	}

	.no-tool-found-description {
		font-size: 1rem;
	}

	.no-tool-found-section {
		min-height: calc(100vh - 60px); /* Adjust for smaller header/footer on mobile */
		padding: 1.5rem;
	}
}

@media (max-width: 480px) {
	.no-tool-found-icon {
		font-size: 3.5rem;
	}

	.no-tool-found-title {
		font-size: 1.8rem;
	}

	.no-tool-found-description {
		font-size: 0.95rem;
	}

	.no-tool-found-btn {
		padding: 0.6rem 1.2rem;
		font-size: 0.9rem;
	}
}

/*------------------------------------*\
  # DEMO MODE ALERT
\*------------------------------------*/
.demo-mode-alert {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1051;
	width: 90%;
	max-width: 800px;
	box-shadow: 0 4px 12px var(--shadow-color);
	border-radius: var(--border-radius-md);
	font-size: 0.9rem;
}

/* Dark Mode Support */
[data-theme="dark"] .alert-warning {
	background-color: #332700;
	color: #ffdc73;
	border-color: #856404;
}

	[data-theme="dark"] .alert-warning .btn-close {
		filter: invert(1);
	}


/* Container for the uploaded image previews */
#vg-sidebar-preview-container {
	display: grid; /* Use CSS Grid for precise control */
	grid-template-columns: repeat(4, 1fr); /* Create 4 equal-width columns */
	gap: 8px; /* Space between the squares */
	padding: 8px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	background-color: var(--bg-light-panel);
}

/* Individual preview item (the square box) */
.vg-image-preview-item {
	position: relative;
	width: 100%; /* Let the grid control the width */
	aspect-ratio: 1 / 1; /* Enforce a square shape */
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--bg-tertiary); /* Fallback bg while image loads */
}

	/* The image inside the preview item */
	.vg-image-preview-item img {
		width: 100%;
		height: 100%;
		object-fit: cover; /* Ensure the image covers the square without distortion */
	}

	/* The remove button for each preview item */
	.vg-image-preview-item .vg-remove-image-btn {
		position: absolute;
		top: 4px;
		right: 4px;
		width: 20px;
		height: 20px;
		background-color: rgba(0, 0, 0, 0.6);
		color: white;
		border: none;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		font-size: 10px;
		opacity: 0;
		transition: opacity 0.2s ease;
		padding: 0;
		z-index: 2; /* Ensure it's above the image */
	}

	/* Show the remove button on hover */
	.vg-image-preview-item:hover .vg-remove-image-btn {
		opacity: 1;
	}

#vg-sidebar-preview-container.video-img {
	display: block;
}

}

@media (max-width: 768px) {
	/* Push alert up to avoid overlapping floating buttons on some pages */
	.demo-mode-alert {
		bottom: 80px;
	}
}

@media (max-width: 576px) {
	.demo-mode-alert {
		flex-direction: column;
		text-align: center;
		gap: 0.5rem;
		padding: 1rem;
		bottom: 10px;
	}

		.demo-mode-alert .alert-icon {
			margin-bottom: 0.25rem;
		}
}


/*------------------------------------*\
  # CHATBOT FILE UPLOAD
\*------------------------------------*/

/* Highlight prompt container on drag over */
.prompt-container.dragover {
	border-color: var(--color-accent) !important;
	box-shadow: 0 0 0 3px var(--color-accent-glow);
}

/* Container for the square image previews */
.file-preview-container {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 8px 4px 8px; /* Add padding only to top/sides */
}

	/* Hide the container when it's empty to prevent extra space */
	.file-preview-container:empty {
		display: none;
	}

/* Individual preview item (the square) */
.file-preview-item {
	position: relative;
	width: 70px;
	height: 70px;
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--bg-tertiary);
}

	/* The image inside the preview item */
	.file-preview-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* The 'x' button to remove an image */
	.file-preview-item .remove-file-btn {
		position: absolute;
		top: 4px;
		right: 4px;
		width: 20px;
		height: 20px;
		background-color: rgba(0, 0, 0, 0.6);
		color: white;
		border: none;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		font-size: 12px;
		line-height: 1;
		padding: 0;
		opacity: 0; /* Hidden by default */
		transition: opacity 0.2s ease;
		z-index: 2;
	}

	/* Show the remove button on hover */
	.file-preview-item:hover .remove-file-btn {
		opacity: 1;
	}


/* --- Chat Image Preview Hover Effect (FINAL VERSION) --- */

/* 1. Style the container for the small image previews in the chat */
.user-message .message-file-previews .file-preview-item {
	cursor: pointer;
	position: relative; /* Crucial for z-index */
	z-index: 1; /* Base stacking context for all items */
	/* NEW: This is the fix. It allows the scaled image to show outside its box. */
	overflow: visible;
	/* Smooth exit transition for z-index */
	transition: z-index 0s linear 0.3s;
}

	/* 2. Add a smooth transition to the image itself */
	.user-message .message-file-previews .file-preview-item img {
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	/* 3. On hover, LIFT THE ENTIRE CONTAINER */
	.user-message .message-file-previews .file-preview-item:hover {
		z-index: 2; /* Lift the hovered container above its siblings */
		transition-delay: 0s; /* Apply z-index change immediately on hover */
	}

		/* 4. ...AND SCALE THE IMAGE INSIDE IT */
		.user-message .message-file-previews .file-preview-item:hover img {
			transform: scale(3.5);
			box-shadow: 0 8px 20px var(--shadow-color);
		}


/* --- BOT MESSAGE IMAGE STYLING --- */

/* Constrain the size of images generated by the bot */
.bot-message .message-content img {
	max-width: 30%;
	max-height: 450px; /* Prevent very tall images from breaking the layout */
	border-radius: var(--border-radius-md); /* Match your UI's rounded corners */
	display: block; /* Ensures proper block-level behavior */
	margin-top: 0.5rem; /* Add some space above the image */
}

/* The wrapper for the generated image and its hover options */
.bot-message .generated-image-container {
	position: relative;
	display: inline-block; /* Fit the container to the image size */
	line-height: 0; /* Remove extra space below the image */
	overflow: hidden; /* Keep rounded corners on the container */
	border-radius: var(--border-radius-md);
}

/* The overlay panel with the action buttons */
.image-hover-options {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: flex-end; /* Align buttons to the right */
	align-items: center;
	gap: 8px;
	padding: 12px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
	/* Hide by default and set up transition */
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none; /* Can't click when hidden */
}

/* Show the options on hover */
.generated-image-container:hover .image-hover-options {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto; /* Buttons are now clickable */
}

/* Individual button style in the hover panel */
.hover-option-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background-color: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(5px);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%; /* Circular buttons */
	cursor: pointer;
	font-size: 14px;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

	.hover-option-btn:hover {
		background-color: rgba(255, 255, 255, 0.3);
		transform: scale(1.1);
	}

/* Fix for extra margin created by <p> tags from Parsedown */
.bot-message .message-content p {
	margin: 0;
	padding: 0;
}

	.bot-message .message-content p:not(:first-child) {
		margin-top: 1rem; /* Add space between paragraphs of text */
	}

.ml-2 {
	margin-left: 6px;
}


/* --- Aspect Ratio Dropdown --- */

/* The main container for the dropdown */
.aspect-ratio-selector {
	position: relative;
}

/* The trigger button that shows the selected icon */
.aspect-ratio-btn {
	display: flex;
	align-items: center;
	gap: 8px; /* Adds space between the icon and the text */
	padding-left: 10px; /* Add some padding for a better look */
	padding-right: 12px;
	width: auto; /* Allow the button to resize based on content */
	min-width: 70px; /* Give it a minimum width */
	max-height: 30px;
}

	.aspect-ratio-btn .selected-ratio-text {
		font-size: 14px;
		font-weight: 500;
		color: var(--text-secondary);
		transition: color 0.3s ease;
	}

	.aspect-ratio-btn:hover .selected-ratio-text {
		color: var(--text-primary);
	}

	.aspect-ratio-btn img {
		width: 16px;
		height: 16px;
		/* Use a filter to make the SVG match the theme's text color */
		filter: invert(60%) sepia(8%) saturate(379%) hue-rotate(187deg) brightness(92%) contrast(89%);
		transition: filter 0.3s ease;
	}

[data-theme="dark"] .aspect-ratio-btn img {
	filter: invert(99%) sepia(4%) saturate(343%) hue-rotate(200deg) brightness(115%) contrast(87%);
}

.aspect-ratio-btn:hover img {
	filter: invert(99%) sepia(4%) saturate(343%) hue-rotate(200deg) brightness(115%) contrast(87%);
}

/* The dropdown panel itself */
.aspect-ratio-dropdown {
	position: absolute;
	bottom: calc(100% + 8px); /* Position above the button */
	right: 0;
	width: 150px;
	background-color: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	box-shadow: 0 5px 15px var(--shadow-color);
	padding: 8px;
	z-index: 10;
	/* Animation for showing/hiding */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	max-height: 270px;
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: #555 transparent;
}

	/* The class to show the dropdown */
	.aspect-ratio-dropdown.active {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

/* A single option in the dropdown list */
.aspect-ratio-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border-radius: var(--border-radius-sm);
	cursor: pointer;
	transition: background-color 0.2s ease;
	font-size: 14px;
	font-weight: 500;
}

	.aspect-ratio-option:hover {
		background-color: var(--bg-light-panel);
	}

	.aspect-ratio-option img {
		width: 20px;
		height: 20px;
		filter: invert(60%) sepia(8%) saturate(379%) hue-rotate(187deg) brightness(92%) contrast(89%);
	}

[data-theme="dark"] .aspect-ratio-option img {
	filter: invert(99%) sepia(4%) saturate(343%) hue-rotate(200deg) brightness(115%) contrast(87%);
}


/* --- Chatbot Model Selector --- */
.model-select-btn {
	gap: 12px; /* Add more space for the icon */
}

.selected-model-icon {
	width: 20px;
	height: 20px;
	filter: brightness(0) invert(.85) !important;
}

.model-popover-panel {
	position: absolute;
	top: calc(100% + 5px);
	left: 0;
	width: 360px;
	z-index: 1010;
	visibility: hidden;
	opacity: 0;
	transform: translateY(10px);
	transition: all 0.2s ease-out;
}

	.model-popover-panel.active {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}

.model-panel {
	padding: 8px;
	width: 100%;
	border-radius: var(--border-radius-lg);
	background: #fafafb;
	border: 1px solid var(--border-color);
	box-shadow: 0 10px 30px var(--shadow-color);
}

[data-theme=dark] .model-panel {
	background: var(--bg-quaternary);
}

[data-theme=light] .model-group-icon {
	filter: brightness(0) invert(.3) !important;
}

[data-theme=light] .selected-model-icon {
	filter: brightness(0) invert(.3) !important;
}

.model-popover-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px;
	font-weight: 600;
}

.close-popover-btn {
	background: none;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	font-size: 1rem;
}

	.close-popover-btn:hover {
		color: var(--text-primary);
	}

.model-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.model-option-group, .model-option {
	padding: 12px;
	border-radius: var(--border-radius-sm) !important;
	cursor: pointer;
	transition: background-color .25s;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: none;
}

	.model-option-group:hover, .model-option:hover {
		background-color: var(--bg-light-panel);
	}

	.model-option-group.active-group {
		background-color: var(--bg-light-panel);
	}

.model-main {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-grow: 1;
}

.model-group-icon {
	width: 24px;
	height: 24px;
	filter: brightness(0) invert(.85);
}

.model-info {
	display: flex;
	flex-direction: column;
}

.model-name {
	font-weight: 500;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	font-size: 0.9rem;
}

.model-desc {
	font-size: .8rem;
	color: var(--text-secondary);
	margin-top: 2px;
}

.vg-badge { /* Re-using this class as it's good */
	font-size: .65rem;
	font-weight: 700;
	padding: 3px 6px;
	border-radius: 6px;
	margin-left: 8px;
	text-transform: uppercase;
}

	.vg-badge.new {
		background-color: rgba(142,99,230,.2);
		color: var(--color-accent);
	}

.vg-arrow, .vg-checkmark {
	color: var(--text-secondary);
}

.vg-checkmark {
	visibility: hidden;
}

.model-option.selected .vg-checkmark {
	visibility: visible;
	color: var(--color-accent);
}

/* Sub Panels */
.model-panel-sub {
	position: absolute;
	top: 0;
	left: calc(100% + 10px);
	width: 100%;
	height: auto;
	max-height: 70vh;
	overflow-y: auto;
	background: #fafafb;
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s ease,transform .2s ease;
	transform: translateX(10px);
	scrollbar-width: thin;
	scrollbar-color: #555 transparent;
}

	.model-panel-sub.active {
		visibility: visible;
		opacity: 1;
		transform: translateX(0);
	}

.sub-panel-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	font-weight: 700;
	border-bottom: 1px solid var(--border-color);
	margin: -8px -8px 8px;
}

.back-btn {
	cursor: pointer;
	color: var(--text-secondary);
}

	.back-btn:hover {
		color: var(--text-primary);
	}

/* Mobile Responsiveness */
@media (max-width: 768px) {
	.model-popover-panel {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		border-radius: 0;
		z-index: 2000;
		animation: vg-slideUp .3s ease-out; /* Re-use animation */
		background-color: var(--bg-secondary);
	}

	.model-panel-sub {
		left: 0;
		transform: translateX(100%);
		transition: transform .3s ease;
	}

		.model-panel-sub.active {
			transform: translateX(0);
		}
}

.model-option-group.selected .vg-arrow {
	color: var(--color-accent);
}


.d-none {
	display: none !important;
}
















/* style.css */

/* --- ADD THIS CSS FOR CODE BLOCKS --- */

/* The main container for a code block */
.bot-message .code-block-container {
    background-color: var(--bg-secondary); /* A slightly different background */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    margin: 1rem 0;
    overflow: hidden; /* Important for child border-radius */
}

/* Header for the code block (shows language and copy button) */
.bot-message .code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* The copy button */
.bot-message .copy-code-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.bot-message .copy-code-btn:hover {
    background-color: var(--bg-light-panel);
    color: var(--text-primary);
}

/* The <pre> tag generated by the markdown parser */
.bot-message pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto; /* Allow horizontal scrolling for long lines */
    background-color: transparent !important; /* Override highlight.js theme background */
}

/* The <code> tag inside */
.bot-message pre code.hljs {
    padding: 0; /* Remove default padding from highlight.js */
    background: none; /* Ensure it's transparent */
    color: var(--text-primary); /* Set a base text color */
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
}

/* style.css */

/* --- ADD THESE NEW STYLES --- */

/* Tabs above the frame uploader */
.video-generator-ui .vg-main-tabs {
	display: flex;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--border-color);
}

.video-generator-ui .vg-tab-btn {
	background: none;
	border: none;
	color: var(--text-secondary);
	padding: 8px 16px;
	font-weight: 500;
	cursor: pointer;
	position: relative;
	transition: color 0.2s ease;
}

	.video-generator-ui .vg-tab-btn.active {
		color: var(--text-primary);
	}

		.video-generator-ui .vg-tab-btn.active::after {
			content: '';
			position: absolute;
			bottom: -1px;
			left: 0;
			right: 0;
			height: 2px;
			background-color: var(--text-primary);
		}

/* Container for the two dropzones and swap icon */
.video-generator-ui .vg-frame-uploader-container {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
}

.video-generator-ui .vg-dropzone:hover {
	border-color: var(--color-accent);
	color: var(--text-primary);
	cursor: pointer;
}

/* Reusable dropzone style */
.video-generator-ui .vg-dropzone {
	flex: 1;
	position: relative;
	height: 140px;
	background-color: var(--bg-primary);
	border: 2px dashed var(--border-color);
	border-radius: var(--border-radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
	overflow: hidden; /* Important for the preview */
}

	.video-generator-ui .vg-dropzone.dragover {
		border-color: var(--color-accent);
		background-color: var(--bg-tertiary);
	}

/* Content inside the dropzone (icon, text, history) */
.video-generator-ui .vg-dropzone-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--text-secondary);
	transition: opacity 0.2s ease;
	font-size: 12px;
}

	.video-generator-ui .vg-dropzone-content i {
		font-size: 1.75rem;
	}

	.video-generator-ui .vg-dropzone-content span {
		font-weight: 500;
	}

.video-generator-ui .vg-history-link {
	font-size: 0.8rem;
	color: var(--text-placeholder);
	text-decoration: underline;
}

/* Preview container that appears inside the dropzone */
.video-generator-ui .vg-frame-preview {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

	.video-generator-ui .vg-frame-preview img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Remove button for the frame preview */
	.video-generator-ui .vg-frame-preview .vg-remove-image-btn {
		top: 8px;
		right: 8px;
		width: 24px;
		height: 24px;
		font-size: 0.8rem;
	}

/* The swap icon between the frames */
.video-generator-ui .vg-swap-icon {
	color: var(--text-secondary);
	font-size: 1.2rem;
}

/* Styling for the multi-image preview grid (re-using image-gen styles) */
.video-generator-ui #vg-sidebar-preview-container.multi-image-mode {
	display: grid;
	/*grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));*/
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	background-color: var(--bg-primary);
	margin-top: 12px;
}

.video-generator-ui .multi-image-mode .vg-image-preview-item {
	/* Uses styles from image gen page */
}

.cursor-pointer{
	cursor:pointer;
}

.resolution-selector {
	position: relative;
}

.resolution-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border-radius: var(--border-radius-sm);
	cursor: pointer;
	transition: background-color 0.2s ease;
	font-size: 14px;
	font-weight: 500;
}


.resolution-option:hover {
	background-color: var(--bg-light-panel);
}

.resolution-option img {
	width: 20px;
	height: 20px;
	filter: invert(60%) sepia(8%) saturate(379%) hue-rotate(187deg) brightness(92%) contrast(89%);
}

[data-theme="dark"] .resolution-option img {
	filter: invert(99%) sepia(4%) saturate(343%) hue-rotate(200deg) brightness(115%) contrast(87%);
}



/* The trigger button that shows the selected icon */
.resolution-btn {
	display: flex;
	align-items: center;
	gap: 8px; /* Adds space between the icon and the text */
	padding-left: 10px; /* Add some padding for a better look */
	padding-right: 12px;
	width: auto; /* Allow the button to resize based on content */
	min-width: 70px; /* Give it a minimum width */
	max-height: 30px;
}

	.resolution-btn .selected-resolution-text {
		font-size: 14px;
		font-weight: 500;
		color: var(--text-secondary);
		transition: color 0.3s ease;
	}

	.resolution-btn:hover .selected-resolution-text {
		color: var(--text-primary);
	}

	.resolution-btn img {
		width: 16px;
		height: 16px;
		/* Use a filter to make the SVG match the theme's text color */
		filter: invert(60%) sepia(8%) saturate(379%) hue-rotate(187deg) brightness(92%) contrast(89%);
		transition: filter 0.3s ease;
	}

[data-theme="dark"] .resolution-btn img {
	filter: invert(99%) sepia(4%) saturate(343%) hue-rotate(200deg) brightness(115%) contrast(87%);
}

.resolution-btn:hover img {
	filter: invert(99%) sepia(4%) saturate(343%) hue-rotate(200deg) brightness(115%) contrast(87%);
}


/* The dropdown panel itself */
.resolution-dropdown {
	position: absolute;
	bottom: calc(100% + 8px); /* Position above the button */
	right: 0;
	width: 120px;
	background-color: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	box-shadow: 0 5px 15px var(--shadow-color);
	padding: 8px;
	z-index: 10;
	/* Animation for showing/hiding */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	max-height: 270px;
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: #555 transparent;
}

	/* The class to show the dropdown */
	.resolution-dropdown.active {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}


/* --------------------------------------------- Auth/Login Style ------------------------------------------------*/



.auth-container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bg-primary);
	padding: 1.5rem;
	position: relative;
	overflow: hidden;
}

/* Decorative background elements */
.auth-bg-shape {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	z-index: 0;
	opacity: 0.4;
}

.shape-1 {
	width: 400px;
	height: 400px;
	background-color: var(--color-purple-dark);
	top: -100px;
	left: -100px;
}

.shape-2 {
	width: 300px;
	height: 300px;
	background-color: var(--color-accent);
	bottom: -50px;
	right: -50px;
	opacity: 0.2;
}

.auth-card {
	display: flex;
	width: 100%;
	max-width: 1000px;
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
	box-shadow: 0 20px 50px rgba(0,0,0,0.2);
	overflow: hidden;
	z-index: 1;
	min-height: 600px;
}

/* Left Side: Form */
.auth-form-side {
	flex: 1;
	padding: 3rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Right Side: Visual */
.auth-visual-side {
	flex: 1;
	background: linear-gradient(135deg, var(--color-purple-dark), var(--color-purple));
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3rem;
	color: #fff;
	overflow: hidden;
}

	/* Pattern overlay using your existing hero SVG */
	.auth-visual-side::before {
		content: '';
		position: absolute;
		inset: 0;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath fill-rule='evenodd' d='M0 0h20v20H0V0zm20 20h20v20H20V20z'/%3E%3C/g%3E%3C/svg%3E");
		z-index: 1;
	}

.visual-content {
	position: relative;
	z-index: 2;
	text-align: center;
}

.visual-img {
	width: 80%;
	max-width: 300px;
	margin: 0 auto 2rem;
	filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
}

/* Typography overrides for visual side (Always white) */
.visual-content h2 {
	color: #fff;
	font-size: 2rem;
	margin-bottom: 1rem;
}

.visual-content p {
	color: rgba(255,255,255,0.8);
}

/* Form Elements */
.auth-header {
	margin-bottom: 2rem;
}

.auth-title {
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--text-primary);
}

.auth-subtitle {
	color: var(--text-secondary);
}

.social-login {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.btn-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem;
	border-radius: var(--border-radius-pill);
	border: 1px solid var(--border-color);
	background-color: var(--bg-primary);
	color: var(--text-primary);
	font-weight: 500;
	cursor: pointer;
	transition: var(--transition-main);
}

	.btn-social:hover {
		background-color: var(--bg-tertiary);
		border-color: var(--text-secondary);
	}

.auth-divider {
	display: flex;
	align-items: center;
	margin-bottom: 1.5rem;
	color: var(--text-secondary);
	font-size: 0.9rem;
}

	.auth-divider::before, .auth-divider::after {
		content: '';
		flex: 1;
		height: 1px;
		background-color: var(--border-color);
	}

	.auth-divider span {
		margin: 0 1rem;
	}

.form-group {
	margin-bottom: 1.25rem;
	position: relative;
}

.form-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var(--text-primary);
	font-size: 0.9rem;
}

/* Extending your existing input styles */
.auth-input {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-sm);
	background-color: var(--input-bg);
	color: var(--text-primary);
	transition: all 0.2s ease;
	font-size: 1rem;
}

	.auth-input:focus {
		border-color: var(--color-accent);
		background-color: var(--bg-primary);
		box-shadow: 0 0 0 3px var(--color-accent-glow);
		outline: none;
	}

.auth-textarea {
	min-height: 0px !important;
}

.password-toggle {
	position: absolute;
	right: 1rem;
	top: 2.4rem;
	color: var(--text-secondary);
	cursor: pointer;
}

	.password-toggle:hover {
		color: var(--text-primary);
	}

.form-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
}

.remember-me {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text-secondary);
	cursor: pointer;
}

.forgot-pass {
	color: var(--color-purple);
	font-weight: 600;
	text-decoration: none;
}

	.forgot-pass:hover {
		text-decoration: underline;
	}

.btn-full-width {
	width: 100%;
	justify-content: center;
	font-size: 1rem;
}

.auth-bottom-text {
	text-align: center;
	margin-top: 1.5rem;
	color: var(--text-secondary);
}

	.auth-bottom-text a {
		color: var(--color-purple);
		font-weight: 600;
		text-decoration: none;
	}

		.auth-bottom-text a:hover {
			text-decoration: underline;
		}

/* Theme Toggle Specific for Login Page */
.login-theme-toggle {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 10;
}

/* Responsive */
@media (max-width: 992px) {
	.auth-visual-side {
		display: none;
	}

	.auth-card {
		max-width: 500px;
		min-height: auto;
	}
}

@media (max-width: 480px) {
	.auth-form-side {
		padding: 2rem 1.5rem;
	}

	.auth-container {
		padding: 1rem;
	}

	.social-login {
		grid-template-columns: 1fr;
	}
}


.profile-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 2rem 0;
}

.profile-card {
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
	padding: 2rem;
	box-shadow: 0 10px 30px var(--shadow-color);
}

.profile-header {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--border-color);
}

.profile-avatar-large {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, var(--color-purple), var(--color-accent));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: white;
	box-shadow: 0 4px 12px rgba(142, 99, 230, 0.4);
}

.form-section-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 1rem;
	margin-top: 1.5rem;
}

.alert-box {
	padding: 1rem;
	border-radius: var(--border-radius-md);
	margin-bottom: 1.5rem;
	display: none;
	font-size: 0.9rem;
}

.alert-success {
	background-color: rgba(46, 204, 113, 0.15);
	border: 1px solid #2ecc71;
	color: #2ecc71;
}

.alert-error {
	background-color: rgba(231, 76, 60, 0.15);
	border: 1px solid var(--color-red-danger);
	color: var(--color-red-danger);
}

.btn-secondary {
	background-color: transparent; /* or var(--bg-light-panel) */
	color: var(--text-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-pill); /* Matches your 25px pill */
	padding: .75rem 1.5rem;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	font-weight: 500;
}

	.btn-secondary:hover {
		background-color: var(--bg-light-panel);
		color: var(--text-primary);
		border-color: var(--text-secondary);
		text-decoration: none;
	}

	.btn-secondary i {
		margin-right: 0.5rem;
	}

/* Helper for spacing between buttons */
.btn-gap {
	display: flex;
	gap: 15px; /* Adds space between the buttons */
	justify-content: flex-end; /* Aligns them to the right */
}

.text-primary {
	color: var(--text-primary) !important;
}

.mr-6 {
	margin-right: 6px;
}