/* Lumise addon: AI Image Generate */

#lumise-ai_generate textarea {
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
	min-height: 90px;
	padding: 10px;
	border-radius: 4px;
	border: none;
	font: inherit;
	font-size: 13px;
}

#lumise-ai_generate .lumise-ai-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0;
}

#lumise-ai_generate .lumise-ai-row input[type="checkbox"] {
	width: auto;
	margin: 0 6px 0 0;
}

#lumise-ai_generate .lumise-ai-row label {
	display: inline;
	cursor: pointer;
}

#lumise-ai-generate-btn {
	width: 100%;
	padding: 12px;
	cursor: pointer;
	border: none;
	border-radius: 4px;
	font-size: 14px;
}

#lumise-ai-generate-btn.loading {
	opacity: 0.6;
	cursor: progress;
}

#lumise-ai-generate-btn.loading i {
	display: inline-block;
	animation: lumise-ai-spin 1.2s linear infinite;
}

@keyframes lumise-ai-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

#lumise-ai-status {
	margin: 10px 0;
	font-size: 12px;
	opacity: 0.85;
	min-height: 16px;
}

#lumise-ai-status.error {
	color: #ff6b6b;
	opacity: 1;
}

#lumise-ai-result {
	margin: 10px 0;
}

#lumise-ai-result img {
	max-width: 100%;
	border-radius: 4px;
	background-image: linear-gradient(45deg, #444 25%, transparent 25%),
		linear-gradient(-45deg, #444 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #444 75%),
		linear-gradient(-45deg, transparent 75%, #444 75%);
	background-size: 16px 16px;
	background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

#lumise-ai_generate .lumise-ai-tip {
	margin-top: 14px;
	font-size: 12px;
}