html, body { height: 100%; margin: 0; font-family: system-ui, sans-serif; color: #e6e6e6; background: #1e1e1e; }
html { overflow: hidden; }
/* Ensure borders/padding are included in width calculations for editors */
textarea, pre.scroll, .CodeMirror { box-sizing: border-box; }
/* Layout: prevent page-level scroll; only panes scroll */
body { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #252526; border-bottom: 1px solid #333; position: relative; z-index: 100; }
header h1 { font-size: 16px; margin: 0; }
.output-anchor, #output-anchor { display: none; }
.toolbar { display: flex; gap: 6px; margin-left: 12px; overflow: visible; }
.toolbar button { background: #333; color: #ddd; border: 1px solid #555; width: 28px; height: 28px; border-radius: 4px; padding: 0; font-size: 14px; line-height: 28px; text-align: center; cursor: pointer; }
.toolbar button:hover { background: #3a3a3a; }
.toolbar button { position: relative; }
/* CSS pseudo-element tooltips removed in favor of JS-driven .q-tooltip */
.controls { display: flex; gap: 8px; align-items: center; }
main { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; padding: 8px; box-sizing: border-box; flex: 1 1 auto; min-height: 0; overflow: auto; }
.pane { display: flex; flex-direction: column; border: 1px solid #333; border-radius: 4px; overflow: hidden; min-height: 0; min-width: 0; max-width: 100%; }
.pane-title { background: #2d2d2d; padding: 6px 8px; border-bottom: 1px solid #333; font-size: 12px; color: #ccc; }
textarea#code { flex: 1; background: #1e1e1e; color: #e6e6e6; border: none; resize: none; padding: 8px; font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 13px; overflow: auto; }
/* CodeMirror theme adjustments to match dark UI */
.CodeMirror { flex: 1; height: 320px; background: #1e1e1e; color: #e6e6e6; font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 13px; border: none; max-width: 100%; min-width: 0; }
.CodeMirror-gutters { background: #2d2d2d; border-right: 1px solid #333; }
.CodeMirror-linenumber { color: #9e9e9e; }
#status.status { padding: 4px 8px; font-size: 11px; background: #2d2d2d; border-top: 1px solid #333; color: #bbb; }
pre.scroll { flex: 1; margin: 0; padding: 8px; background: #1b1b1b; overflow: auto; font-size: 12px; min-width: 0; }
section.io { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 8px 8px; height: 160px; flex: 0 0 auto; }
section.io textarea { height: 120px; width: 100%; background: #1e1e1e; color: #e6e6e6; border: 1px solid #333; border-radius: 4px; resize: none; padding: 8px; font-family: ui-monospace, monospace; font-size: 12px; box-sizing: border-box; }
#stdout { height: 120px; }
button, select { background: #0e639c; color: white; border: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; }
select { background: #333; border: 1px solid #555; }
button:hover { filter: brightness(1.1); }
pre.error { color: #ff8a80; white-space: pre-wrap; }
footer { padding: 6px 12px; border-top: 1px solid #333; color: #bbb; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
footer .cookies-note { margin-left: auto; opacity: 0.9; }
footer .beta { color: #ffa726; opacity: 0.95; }
footer .version { opacity: 0.9; }

/* JS-driven tooltip */
.q-tooltip { position: fixed; background: #2d2d2d; color: #eee; padding: 6px 8px; border-radius: 4px; font-size: 12px; white-space: pre; border: 1px solid #555; box-shadow: 0 6px 16px rgba(0,0,0,0.5); z-index: 4000; pointer-events: none; max-width: 60vw; }

/* Toast notification */
.q-toast {
	position: fixed;
	top: 12px;
	left: 50%;
	transform: translate(-50%, -12px);
	background: #2e7d32; /* green */
	color: #fff;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 13px;
	box-shadow: 0 8px 22px rgba(0,0,0,0.6);
	z-index: 5000;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.q-toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Fullscreen overlay for outputs */
.fs-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 6000; display: none; }
.fs-overlay.show { display: flex; align-items: stretch; justify-content: center; }
.fs-panel { background: #121212; border: 1px solid #444; border-radius: 6px; width: 96vw; height: 92vh; margin: auto; display: flex; flex-direction: column; box-shadow: 0 10px 24px rgba(0,0,0,0.6); }
.fs-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #1f1f1f; border-bottom: 1px solid #333; font-size: 13px; color: #ddd; }
.fs-body { flex: 1; overflow: hidden; padding: 10px 12px; background: #151515; display: flex; flex-direction: column; min-height: 0; }
.fs-panel { min-height: 0; }
.fs-body > pre,
.fs-body > textarea { flex: 1 1 auto; width: 100%; height: 100%; margin: 0; overflow: auto; font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; line-height: 1.3; min-height: 0; }
.fs-body > pre { flex: 1 1 auto; width: 100%; height: 100%; margin: 0; overflow: auto; font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; line-height: 1.3; min-height: 0; }
.fs-body > textarea { background: #1e1e1e; color: #e6e6e6; border: 1px solid #333; border-radius: 4px; padding: 8px; caret-color: #e6e6e6; box-sizing: border-box; }
.fs-body > pre { background: #1b1b1b; color: #e6e6e6; box-sizing: border-box; }
.fs-body .CodeMirror { height: 100% !important; width: 100% !important; }
.fs-body #output,
.fs-body #stdout,
.fs-body #stdin { height: 100% !important; max-height: none !important; }
.fs-close { background: #333; color: #ddd; border: 1px solid #555; border-radius: 4px; padding: 4px 8px; cursor: pointer; }

/* View selector slot above output (mobile) */
.view-slot { display: none; padding: 6px 8px; background: #222; border-bottom: 1px solid #333; }
.view-slot select { background: #333; border: 1px solid #555; }

/* Responsive adjustments */
@media (max-width: 900px) {
	/* Show view selector slot above output on mobile */
	.view-slot { display: block; }
	/* Hide header title on mobile */
	header h1 { display: none; }
	/* Allow page scroll on mobile */
	html { overflow: auto; height: auto; }
	body { overflow: auto; height: auto; }

	/* Safe single-column layout on mobile */
	main { display: block; overflow: visible; }
	main > * { display: block; width: 100%; box-sizing: border-box; margin: 0 0 10px 0; }

	/* Keep natural DOM order; footer follows content */

		/* (grid no longer applies due to display: contents) */

		/* Input/Output section stacked vertically and flexible */
		section.io { display: flex; flex-direction: column; gap: 8px; padding: 8px; height: auto; }
		section.io > div { display: flex; flex-direction: column; width: 100%; }
		section.io .pane-title { margin-bottom: 4px; }
		section.io textarea { height: 20vh; }
		#stdout { height: 20vh; max-height: 28vh; }

	/* Editor height relative to viewport */
			.CodeMirror { height: 50vh; }
			.pane.left { min-height: 52vh; }
			.pane.right { min-height: 24vh; }
			pre.scroll { max-height: 28vh; }

	/* Wrap controls/buttons in header */
	.controls { flex-wrap: wrap; row-gap: 6px; }
	.toolbar { flex-wrap: wrap; gap: 6px; }
		/* Hide snippet toolbar on mobile to reduce clutter */
		.toolbar { display: none !important; }

	/* Make args input flexible to line width */
	.controls input#args { flex: 1 1 180px; min-width: 140px; }

	/* Footer can wrap and stays after content */
	footer { flex-wrap: wrap; gap: 8px; position: static; }
	footer .cookies-note { margin-left: 0; width: 100%; order: 3; }
}

@media (max-width: 600px) {
	/* Larger tap targets for toolbar buttons */
	.toolbar button { width: 36px; height: 36px; line-height: 36px; font-size: 16px; }
	header h1 { font-size: 14px; }
	.pane-title { font-size: 11px; }
	#status.status { font-size: 10px; }
	.CodeMirror { height: 50vh; }
}