/* Make the result <pre> element scrollable and prevent overflow */
#result {
	max-height: 300px;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-all;
	border: 1px solid #ccc;
	padding: 8px;
	width: 95%;
	background: #fafafa;
}
/* Modal styles */
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.5);
	z-index: 1000;
}
.modal-content {
	background: #fff;
	margin: 40px auto;
	padding: 20px;
	max-width: 600px;
	border-radius: 8px;
	position: relative;
}
#closeSamplesModal {
	position: absolute;
	top: 10px;
	right: 10px;
}
#sampleDetails {
	margin-top: 20px;
}
#copySampleBtn {
	display: none;
	margin-top: 20px;
}
body { font-family: sans-serif; margin: 20px; }
textarea, pre { width: 100%; height: 200px; margin-top: 10px; font-family: monospace; }
button { margin-top: 10px; margin-right: 5px; }

/* Output modal specific styles */

#outputModal .modal-content { max-width: 800px; }
#outputModalContent { max-height: 60vh; overflow: auto; background: #fafafa; padding: 12px; border: 1px solid #ddd; white-space: pre-wrap; }
.modal-close { position: absolute; top: 10px; right: 10px; }

/* Hide copy buttons by default (moved from inline attributes) */
#copyFavoriteBtn, #copySampleBtn { display: none; }