/**
 * Prompt Studio — fake Vlex generator UI
 */

.teya-prompt-studio {
	padding-block: var(--teya-space-xl) var(--teya-section-y);
}

.teya-prompt-studio__shell {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
	gap: var(--teya-space-lg);
	align-items: stretch;
	background: var(--teya-color-surface-low);
	border: var(--teya-border-card);
	border-radius: var(--teya-radius-xxl);
	box-shadow: var(--teya-shadow-card);
	overflow: hidden;
	min-height: 520px;
}

.teya-prompt-studio__shell--solo {
	grid-template-columns: 1fr;
}

.teya-prompt-studio__workspace {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(24px, 4vw, 40px);
	background:
		radial-gradient(circle at 50% 38%, rgba(123, 47, 255, 0.14), transparent 55%),
		var(--teya-color-surface-lowest);
	border-right: var(--teya-border-hairline);
}

.teya-prompt-studio__shell--solo .teya-prompt-studio__workspace {
	border-right: 0;
}

.teya-prompt-studio__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--teya-space-md);
	padding-block: clamp(24px, 6vw, 72px) var(--teya-space-xl);
}

.teya-prompt-studio__icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	position: relative;
	box-shadow: 0 0 0 12px rgba(123, 47, 255, 0.08), 0 0 48px rgba(123, 47, 255, 0.22);
	background: rgba(123, 47, 255, 0.18);
}

.teya-prompt-studio__icon::before {
	content: "";
	width: 28px;
	height: 28px;
	display: block;
	background: var(--teya-gradient-hero);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.teya-prompt-studio__icon--midjourney::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4 18 9 6l3 7 2-4 6 9H4z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4 18 9 6l3 7 2-4 6 9H4z'/%3E%3C/svg%3E");
}

.teya-prompt-studio__icon--seedream::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M5 18V6h3v12H5zm5 0V10h3v8h-3zm5 0V4h3v14h-3z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M5 18V6h3v12H5zm5 0V10h3v8h-3zm5 0V4h3v14h-3z'/%3E%3C/svg%3E");
}

.teya-prompt-studio__icon--flux::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='m12 3 8 14H4l8-14z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='m12 3 8 14H4l8-14z'/%3E%3C/svg%3E");
}

.teya-prompt-studio__icon--nano::before,
.teya-prompt-studio__icon--generic::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2l2.4 7.4H22l-6 4.6 2.3 7-6.3-4.6L5.7 21l2.3-7-6-4.6h7.6L12 2z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2l2.4 7.4H22l-6 4.6 2.3 7-6.3-4.6L5.7 21l2.3-7-6-4.6h7.6L12 2z'/%3E%3C/svg%3E");
}

.teya-prompt-studio__icon--gpt::before,
.teya-prompt-studio__icon--grok::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E");
}

.teya-prompt-studio__title {
	margin: 0;
	font-family: var(--teya-font-display);
	font-size: clamp(22px, 2.5vw, 30px);
	font-weight: 600;
	color: var(--teya-color-on-background);
}

.teya-prompt-studio__lead {
	margin: 0;
	font-size: var(--teya-text-body-md);
	color: var(--teya-color-muted);
}

.teya-prompt-studio__sublead {
	margin: 0;
	font-size: var(--teya-text-body-sm);
	color: rgba(255, 255, 255, 0.55);
	max-width: 42ch;
}

.teya-prompt-studio__composer {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--teya-space-sm);
	align-items: center;
	padding: var(--teya-space-sm);
	background: var(--teya-color-surface-container);
	border: var(--teya-border-hairline);
	border-radius: var(--teya-radius-xl);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.teya-prompt-studio__model-select,
.teya-prompt-studio__select {
	appearance: none;
	background: var(--teya-color-surface-high);
	color: var(--teya-color-on-background);
	border: var(--teya-border-hairline);
	border-radius: var(--teya-radius-lg);
	padding: 10px 36px 10px 12px;
	font: inherit;
	font-size: var(--teya-text-body-sm);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	min-width: 148px;
}

.teya-prompt-studio__prompt-input {
	width: 100%;
	background: transparent;
	border: 0;
	color: var(--teya-color-on-background);
	font: inherit;
	font-size: var(--teya-text-body-md);
	padding: 10px 8px;
}

.teya-prompt-studio__prompt-input::placeholder {
	color: rgba(255, 255, 255, 0.38);
}

.teya-prompt-studio__prompt-input:focus {
	outline: none;
}

.teya-prompt-studio__send {
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: var(--teya-radius-lg);
	display: grid;
	place-items: center;
	color: var(--teya-color-on-primary);
	background: var(--teya-color-primary);
	cursor: pointer;
	transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
	box-shadow: 0 8px 24px rgba(123, 47, 255, 0.35);
}

.teya-prompt-studio__send:hover,
.teya-prompt-studio__generate:hover {
	background: var(--teya-color-primary-hover);
	transform: translateY(-1px);
}

.teya-prompt-studio__demo-note {
	margin: var(--teya-space-sm) 0 0;
	font-size: var(--teya-text-label-sm);
	color: rgba(255, 255, 255, 0.42);
	text-align: center;
}

.teya-prompt-studio__panel {
	padding: clamp(20px, 3vw, 28px);
	background: var(--teya-color-surface-container);
	display: flex;
	flex-direction: column;
	gap: var(--teya-space-lg);
}

.teya-prompt-studio__panel-title {
	margin: 0;
	font-family: var(--teya-font-display);
	font-size: var(--teya-text-headline-sm);
}

.teya-prompt-studio__field {
	display: flex;
	flex-direction: column;
	gap: var(--teya-space-sm);
}

.teya-prompt-studio__label {
	font-size: var(--teya-text-body-sm);
	color: var(--teya-color-muted);
}

.teya-prompt-studio__segmented {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--teya-space-xs);
	padding: 4px;
	background: var(--teya-color-surface-high);
	border-radius: var(--teya-radius-lg);
	border: var(--teya-border-hairline);
}

.teya-prompt-studio__segmented button {
	border: 0;
	background: transparent;
	color: var(--teya-color-muted);
	padding: 10px 12px;
	border-radius: calc(var(--teya-radius-lg) - 4px);
	font: inherit;
	font-size: var(--teya-text-body-sm);
	cursor: pointer;
}

.teya-prompt-studio__segmented button.is-active {
	background: rgba(255, 255, 255, 0.08);
	color: var(--teya-color-on-background);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.teya-prompt-studio__ratios {
	display: flex;
	flex-wrap: wrap;
	gap: var(--teya-space-xs);
}

.teya-prompt-studio__ratio {
	min-width: 52px;
	padding: 8px 10px;
	border-radius: var(--teya-radius-md);
	border: var(--teya-border-hairline);
	background: var(--teya-color-surface-high);
	color: var(--teya-color-on-background);
	font-size: var(--teya-text-label-sm);
	cursor: pointer;
}

.teya-prompt-studio__ratio.is-active {
	border-color: rgba(123, 47, 255, 0.55);
	background: rgba(123, 47, 255, 0.12);
	color: #fff;
}

.teya-prompt-studio__upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--teya-space-sm);
	min-height: 120px;
	padding: var(--teya-space-md);
	border: 1px dashed rgba(255, 255, 255, 0.18);
	border-radius: var(--teya-radius-lg);
	background: rgba(255, 255, 255, 0.02);
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.teya-prompt-studio__upload:hover {
	border-color: rgba(123, 47, 255, 0.45);
	background: rgba(123, 47, 255, 0.06);
}

.teya-prompt-studio__upload-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.06);
	font-size: 22px;
	line-height: 1;
}

.teya-prompt-studio__upload-text {
	font-size: var(--teya-text-body-sm);
	color: var(--teya-color-muted);
	text-align: center;
}

.teya-prompt-studio__generate {
	width: 100%;
	margin-top: auto;
	justify-content: center;
}

@media (max-width: 960px) {
	.teya-prompt-studio__shell {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.teya-prompt-studio__workspace {
		border-right: 0;
		border-bottom: var(--teya-border-hairline);
	}

	.teya-prompt-studio__composer {
		grid-template-columns: 1fr;
	}

	.teya-prompt-studio__model-select {
		width: 100%;
	}

	.teya-prompt-studio__send {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.teya-prompt-studio__send,
	.teya-prompt-studio__generate {
		transition: none;
	}
}