/* --- Grid Specific Styles --- */
/* #grid-container is not found in your JS, assuming it's meant to be gridOutputContainer or something else related to the grid itself */
/* If #grid-container refers to the actual grid cells container, make sure your JS outputs an element with that ID */

#outputWrapper {
	/* Set a default height for small screens, allow override for larger */
	height: 150px;
      margin-top: 200px;
}

#robotPlaygroundContainer {
	background-color: var(--card-bg);
	/* Default for smaller screens: stacked (column) */
	display: flex;
	flex-direction: column;
	gap: 15px; /* Spacing between its direct children */
	padding: 15px;
	border: 1px solid #ccc; /* Moved from JS */
	border-radius: var(--border-radius); /* Use variable for consistency */
	box-shadow: 0 0 30px rgba(75, 156, 255, 0.15),
		/* Subtle initial glow */ 0 0 60px rgba(75, 156, 255, 0.08); /* Wider, softer glow */
    align-items: center;
overflow-y: auto;

}

.grid-cell {
	aspect-ratio: 1/1;
	border: 1px solid var(--card-bg);
	display: flex;
   width:min-content;
  min-width: 100%;
      /* font-size: 100% !important; */
	justify-content: center;
	align-items: center;
	font-size: 0.8em;
	padding: 2px;
	box-sizing: border-box;
	text-align: center;
	word-break: break-all;
	background-color: var(--background);
	color: var(--text-primary);
	transition: background-color 0.2s ease;
}

/* Optional: Adjustments for different output sizes */
/* These classes (output-small, output-medium, output-large) would need to be applied
   to #robotPlaygroundContainer or a parent if they are still desired.
   If not explicitly applied by JS based on user selection, they won't do anything. */
.output-small #gridOutputContainer {
	/* Changed to gridOutputContainer for consistency */
	max-height: 200px;
}

.output-medium #gridOutputContainer {
	max-height: 400px;
}

.output-large #gridOutputContainer {
	max-height: 600px; /* Makes the grid taller for 'large' output */
}

/* Styles for the dynamically added button */
.options-group #generateGridBtn {
	margin-left: 10px;
	padding: 8px 15px;
	border: none;
	width: 100%;
	border-radius: 5px;
	background-color: var(--accent-blue);
	color: white;
	cursor: pointer;
	font-weight: bold;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.options-group #generateGridBtn:hover {
	background-color: var(--accent-blue-dark);
	transform: translateY(-1px);
}

.options-group #generateGridBtn:active {
	transform: translateY(0);
}

/* Base styles for the playground wrapper (parent of robotPlaygroundContainer) */
.playground-wrapper {
	display: flex;
	flex-direction: column; /* Default: stack content and robot playground */
	height: calc(100vh - 200px); /* This will be overridden by media query */
	width: calc(100% - 30px);
	gap: 20px; /* Space between code input and robot playground */
	flex-grow: 1; /* Allows playground-wrapper to take remaining vertical space in 'main' */
	min-height: 0;
}
input {
	padding: 5px;
    border-radius: 5px;
    border: 1px solid var(--text-secondary);
    background-color: var(--background-secondary);
    color: var(--text-primary);
}
/* General button styling (already good) */
button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background-color: var(--accent-blue);
	color: var(--text-primary);
	border: none;
	border-radius: var(--border-radius);
	padding: 0.8rem 1.5rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease,
		box-shadow 0.2s ease;
	font-size: 1rem;
	box-shadow: 0 5px 15px rgba(75, 156, 255, 0.2);
	margin-top: 10px;
}

button:hover {
	background-color: #3a8fe5;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(75, 156, 255, 0.3);
}

button:focus,
button:active {
	outline: none;
	box-shadow: 0 0 0 3px rgba(75, 156, 255, 0.5);
	-webkit-tap-highlight-color: transparent;
}

.material-symbols-rounded {
	vertical-align: bottom;
}

/* Code Input/Output Wrappers: Frosted Glass & Glow Effect */
.code-input-wrapper,
.code-output-wrapper {
	width: 100%;
	margin: 10px;
	padding: 20px;
	font-size: 1rem;
	font-family: "JetBrains Mono", monospace;
	background-color: rgba(28, 29, 41, 0.6);
	backdrop-filter: blur(var(--frosted-glass-blur));
	-webkit-backdrop-filter: blur(var(--frosted-glass-blur));
	border-radius: var(--border-radius);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 30px rgba(75, 156, 255, 0.15),
		0 0 60px rgba(75, 156, 255, 0.08);
	transition: box-shadow 0.3s ease-in-out, transform 0.2s ease;
	color: var(--md-sys-color-on-surface-container-low);
	line-height: 1.5rem;
	position: relative;
	box-sizing: border-box; /* Important for width/padding calculations */
}

.code-input-wrapper:hover,
.code-output-wrapper:hover {
	box-shadow: 0 0 40px rgba(75, 156, 255, 0.25),
		0 0 80px rgba(75, 156, 255, 0.12);
	transform: translateY(-3px);
}

/* Inherited styles for code input/output areas */
.code-input,
.code-output {
	width: 100%;
	border: none;
	background-color: #00000000;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	padding-top: 20px; /* Keep consistent with wrapper padding */
	padding-left: 20px; /* Keep consistent with wrapper padding */
	/* max-width: 80vw; - This can be problematic, better to control parent width */
	font-variant-ligatures: none;
	box-sizing: border-box; /* Important for padding */
}

.code-input {
	/* This is the textarea */
	height: calc(
		100% - 24px
	); /* Adjusted for wrapper padding, if it applies. You might need to refine this based on your textarea's direct parent */
	min-width: 100%; /* Ensure it takes full width of its container */
	height: auto; /* Let flex-grow handle height */
	min-height: 150px; /* Ensure a minimum visible height for the textarea */
	resize: vertical; /* Only allow vertical resizing on smaller screens */
}
.code-input:focus {
	outline: none;
	border: none;
}
textarea {
  height: 100% !important;
    resize: none;

	/* Specific overrides for textarea if needed, otherwise inherit from .code-input */
}

/* Specific Test Code Button Overrides */
.test-code-button {
	/* Override general button styles for specific dimensions */
	/* Remove absolute positioning to work better with flexbox */
	position: static;
	margin: 10px auto; /* Center button horizontally */
	background-color: var(--accent-blue) !important;
	border-radius: 5px;
	height: 25px;
	width: 100px;
	padding: 0;
	font-size: 0.85rem;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center; /* Center vertically */
}

.test-code-button:hover {
	background-color: #3a8fe5 !important;
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(75, 156, 255, 0.4);
}

.test-code-button:focus,
.test-code-button:active {
	box-shadow: 0 0 0 2px rgba(75, 156, 255, 0.6);
}

.test-code-button > span {
	font-size: 1rem !important;
}

h2 {
	margin-bottom: 15px;
	color: var(--text-primary);
}

/* Body and Main to enable full height layout */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: hidden; /* Keep this to prevent horizontal scroll on smaller screens */
}

main {
	flex-grow: 1;
	display: flex;
	flex-direction: column; /* Default: Main contents stack vertically */
	padding-bottom: 20px;
}

/* Options container (grid size input, etc.) */
.options-container {
	display: flex;
	gap: 20px;
	margin-bottom: 20px; /* Spacing below options */
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.options-group label {
	margin-right: 10px;
	font-weight: bold;
}

.options-group select {
	padding: 5px;
	border-radius: 5px;
	border: 1px solid var(--text-secondary);
	background-color: var(--background-secondary);
	color: var(--text-primary);
}

/* Ensure the output container inside the outputWrapper handles its scrollbar */
#output {
	height: calc(
		100% - 40px
	); /* Adjust height to fill parent, considering padding */
	overflow-y: auto; /* Enable vertical scrolling */
	padding-top: 0; /* Already handled by wrapper padding */
	padding-left: 0; /* Already handled by wrapper padding */
	/* max-width is removed here too to prevent conflicts */
}

/* --- Media Queries for Responsive Layout --- */
@media (max-width: 768px) {
	#robotPlaygroundContainer {
		flex-direction: column !important;
	}
}
/* Breakpoint for side-by-side view (adjust as needed, e.g., 768px for tablet/desktop) */
@media (min-width: 768px) {
  .options-group {
   width: 100%; 
}
	.playground-wrapper {
		flex-direction: row; /* Main layout is now row */
		height: calc(100vh - 100px); /* Give it more height on larger screens */
		/* You might need to adjust this 100px based on your actual header/footer height */
	}

	/* Make code input wrapper and robot playground container side-by-side */
	.code-input-wrapper {
		flex: 1; /* Allow it to take up available space */
		min-width: 400px; /* Ensure it's not too narrow */
		height: auto; /* Let it grow with content */
	}

	#robotPlaygroundContainer {
		flex: 1; /* Allow it to take up available space */
		min-width: 400px; /* Ensure it's not too narrow */
		flex-direction: column; /* Keep its internal elements stacked for settings, grid, output */
		/* Or, if you want the grid and output inside to be side-by-side on large screens: */
		/* display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; */
		/* And then style its direct children: */
		/* #gridOutputContainer, #outputWrapper { flex: 1; min-width: 300px; } */
	}

	/* Style the children of robotPlaygroundContainer for side-by-side within it */
	#robotPlaygroundContainer {
		display: flex;
		flex-direction: row; /* Arrange grid settings, grid, and output in a row */
		flex-wrap: wrap; /* Allow wrapping if space is limited */
		align-items: flex-start; /* Align content to the top */
		justify-content: space-around; /* Distribute space */
	}

	/* Give specific children within robotPlaygroundContainer space */
	.options-group {
		/* The grid settings group */
		justify-content: center; /* Center elements within the options group */
	}

	#gridOutputContainer {
		min-width: 350px; /* Minimum width for the grid */
		height: auto; /* Let content define height */
		min-height: 350px; /* Ensure a decent height for the grid */
		/* Margin adjusted for side-by-side within robotPlaygroundContainer */
		margin: 0 10px 0 0; /* Right margin for spacing */
	}

	#outputWrapper {
		min-width: 300px; /* Minimum width for the output */
		height: auto; /* Let content define height */
		/* Margin adjusted for side-by-side within robotPlaygroundContainer */
		margin: 0 0 0 10px; /* Left margin for spacing */
	}

	.code-input {
		min-width: unset; /* Allow flexibility */
		height: auto; /* Let flex handle height on larger screens */
		resize: horizontal; /* Allow horizontal resizing on larger screens */
	}

	.test-code-button {
		/* Reset positioning for larger screens if necessary, though static is generally fine */
		margin: 10px auto; /* Keep centered */
	}
}

/* Optional: Very large screen adjustments */
@media (min-width: 1200px) {
	#robotPlaygroundContainer {
		flex-direction: column;
		/* If you want grid and output to be exactly 50/50 */
		/* justify-content: center; - to center if elements aren't filling row */
	}
	#gridOutputContainer,
	#outputWrapper {
		/* max-width: 48%; Adjust to ensure two items fit well */
	}
}