:root {
	color-scheme: dark;

	/* Strata brand — dark UI with a bright-purple accent. */
	--accent: #b061ff;          /* bright purple */
	--accent-strong: #9333ea;
	--accent-contrast: #ffffff;
	--accent-12: rgba( 176, 97, 255, 0.16 );
	--accent-10: rgba( 176, 97, 255, 0.14 );
	--accent-06: rgba( 176, 97, 255, 0.10 );
	--accent-50: rgba( 176, 97, 255, 0.55 );
	--accent-25: rgba( 176, 97, 255, 0.32 );

	/* The five strata layers of the mark, bottom → top. */
	--strata-blue: #5181e6;
	--strata-teal: #2fa3b7;
	--strata-green: #3aa86a;
	--strata-orange: #dd8a3c;
	--strata-red: #cf514b;

	/* App chrome — dark slate, matched to the existing dark surfaces. */
	--chrome: #111111;
	--chrome-2: #1b1b1b;
	--chrome-border: #222222;
}

[hidden] {
	display: none !important;
}

body {
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size: 14px;
	margin: 0;
	overflow: hidden;
}

hr {
	border: 0;
	border-top: 1px solid #ccc;
}

.Button {
	position: relative;
}

.Input {
	vertical-align: middle;
}

	.Input[type="color"]::-webkit-color-swatch-wrapper {
		padding: 0;
	}
	.Input[type="color"]::-webkit-color-swatch {
		border: none;
	}

.TextArea {
	tab-size: 4;
	white-space: pre;
	word-wrap: normal;
}

	.TextArea.success {
		border-color: #8b8 !important;
	}

	.TextArea.fail {
		border-color: #f00 !important;
		background-color: rgba(255,0,0,0.05);
	}

.TextArea, .Input { outline: none; } /* osx */

.Panel {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;

	/* No support for these yet */
	-o-user-select: none;
	user-select: none;
}

.TabbedPanel {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;

	/* No support for these yet */
	-o-user-select: none;
	user-select: none;
	position: relative;
	display: block;
	width: 100%;
	min-width: 335px;
}

.TabbedPanel .Tabs {
	position: relative;
	z-index: 1; /** Above .Panels **/
	display: block;
	width: 100%;
	white-space: pre;
	overflow: hidden;
	overflow-x: auto;
}

	.TabbedPanel .Tabs::-webkit-scrollbar {
		height: 5px;
		background: #eee;
	}
	.TabbedPanel .Tabs::-webkit-scrollbar-thumb {
		background: #08f3;
	}
	.TabbedPanel .Tabs:hover::-webkit-scrollbar-thumb {
		background: #08f;
		cursor: ew-resize;
	}

	.TabbedPanel .Tabs .Tab {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 8px 10px 6px;
		text-transform: uppercase;
		min-width: 52px;
		cursor: pointer;
		border-bottom: 3px solid transparent;
		transition: color 0.15s, background 0.15s, border-color 0.15s;
	}

	.TabbedPanel .Tabs .Tab:hover {
		color: #08f;
		background: rgba( 0, 136, 255, 0.06 );
	}

	.TabbedPanel .Tabs .Tab.selected {
		color: #08f;
		background: rgba( 0, 136, 255, 0.12 );
		border-bottom-color: #08f;
		font-weight: bold;
	}

	.TabbedPanel .Tabs .tab-icon {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.TabbedPanel .Tabs .tab-label {
		font-size: 9px;
		letter-spacing: 0.04em;
		line-height: 1;
		text-align: center;
    	display: block;
	    margin-top: 5px;
	}

	.TabbedPanel .Panels {
		position: absolute;
		top: 56px;
		display: block;
		width: 100%;
	}

/* The object-properties panel is inlined directly under the outliner tree (not
   the top-level sidebar), so its tab panels must sit in normal document flow.
   The default `position: absolute` pulled them out of flow and overlapped the
   scene-level properties (background / environment / fog / stats) below it. */
#properties > .Panels {
	position: relative;
	top: 0;
}

/* Listbox */
.Listbox {
	color: #444;
	background-color: #fff;
	padding: 0;
	width: 100%;
	min-height: 180px;
	font-size: 12px;
	cursor: default;
	overflow: auto;
}

.Listbox .ListboxItem {
	padding: 4px;
	color: #666;
	white-space: nowrap;
}

.Listbox .ListboxItem:hover {
	background-color: rgba(0, 0, 0, 0.02);
}

.Listbox .ListboxItem.active {
	background-color: rgba(0, 0, 0, 0.04);
}

/* CodeMirror */

.CodeMirror {

	position: absolute !important;
	top: 37px;
	width: 100% !important;
	height: calc(100% - 37px) !important;

}

	.CodeMirror .errorLine {

		background: rgba(255,0,0,0.25);

	}

	.CodeMirror .esprima-error {

		color: #f00;
		text-align: right;
		padding: 0 20px;

	}

/* outliner */

#outliner .opener {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0px 4px;
	vertical-align: top;
	text-align: center;
}

	#outliner .opener.open:after {
		content: '−';
	}

	#outliner .opener.closed:after {
		content: '+';
	}

#outliner .option {

	border: 1px solid transparent;

}

#outliner .option.drag {

	border: 1px dashed #999;

}

#outliner .option.dragTop {

	border-top: 1px dashed #999;

}

#outliner .option.dragBottom {

	border-bottom: 1px dashed #999;

}

#outliner .type {
	display: inline-block;
	width: 14px;
	height: 14px;
	color: #ddd;
	text-align: center;
}

#outliner .type:after {
	content: '●';
}

/* */

#outliner .Scene {
	color: #8888dd;
}

#outliner .Camera {
	color: #dd8888;
}

#outliner .Light {
	color: #dddd88;
}

/* */

#outliner .Object3D {
	color: #aaaaee;
}

#outliner .Mesh {
	color: #8888ee;
}

#outliner .Line {
	color: #88ee88;
}

#outliner .LineSegments {
	color: #88ee88;
}

#outliner .Points {
	color: #ee8888;
}

/* */

#outliner .Geometry {
	color: #aaeeaa;
}

#outliner .Material {
	color: #eeaaee;
}

/* */

#outliner .Script:after {
	content: '◎'
}

/*  */

.Button {
	color: #555;
	background-color: #ddd;
	border: 0px;
	margin: 0px; /* GNOME Web */
	padding: 5px 8px;
	font-size: 12px;
	text-transform: uppercase;
	cursor: pointer;
	outline: none;
}

	.Button:hover {
		background-color: #fff;
	}

	.Button.selected {
		background-color: #fff;
	}

.Input, .TextArea {
	border: 1px solid transparent;
	color: #444;
}

.Input.Number {
	color: #08f!important;
	font-size: 12px;
	border: 0px;
	padding: 2px;
}

.Select {
	color: #666;
	background-color: #ddd;
	border: 3px solid #ddd;
	border-radius: 4px;
	text-transform: uppercase;
	cursor: pointer;
	outline: none;
}

	.Select:hover {
		background-color: #fff;
	}

/* UI */

:root {
	--sidebar-width: 350px;  /* used when docked left or right */
	--sidebar-height: 420px; /* used when docked at the bottom */
}

#resizer {
	position: absolute;
	z-index: 2; /* Above #sidebar */
	top: 36px;
	right: var( --sidebar-width );
	width: 5px;
	bottom: 0px;
	transform: translatex(2.5px);
	cursor: col-resize;
}

	#resizer:hover {
		background-color: #08f8;
		transition-property: background-color;
		transition-delay: 0.1s;
		transition-duration: 0.2s;
	}

	#resizer:active {
		background-color: #08f;
	}

#viewport {
	position: absolute;
	top: 36px;
	left: 0;
	right: var( --sidebar-width );
	bottom: 0;
}

	#viewport .Text {
		text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
		pointer-events: none;
	}

#animation {
	position: absolute;
	left: 0;
	right: var( --sidebar-width );
	bottom: 0;
	height: 36px;
	background: #eee;
	border-top: 1px solid #ccc;
	display: none;
	flex-direction: row;
}

	#animation .Panel {
		color: #888;
	}

	#animation input[type="range"] {
		accent-color: #08f;
	}

#animation-resizer {
	position: absolute;
	left: 0;
	right: var( --sidebar-width );
	bottom: 36px;
	height: 5px;
	transform: translateY(2.5px);
	cursor: row-resize;
	z-index: 2;
}

	#animation-resizer:hover {
		background-color: #08f8;
		transition-property: background-color;
		transition-delay: 0.1s;
		transition-duration: 0.2s;
	}

	#animation-resizer:active {
		background-color: #08f;
	}

#script {
	position: absolute;
	top: 36px;
	left: 0;
	right: var( --sidebar-width );
	bottom: 0;
	opacity: 0.9;
}

#player {
	position: absolute;
	top: 36px;
	left: 0;
	right: var( --sidebar-width );
	bottom: 0;
}

/* ── Present mode (#...&present=true) — viewer-only, no editing chrome ───────
   Hides the menubar (top toolbar), the floating tool palette (bottom option)
   and the sidebar, and lets #viewport/#script/#player fill the whole screen.
   #present-bar (play/pause/stop + seek) is the only chrome left, shown only
   in this mode. */
body.present-mode #menubar,
body.present-mode #toolbar,
body.present-mode #sidebar,
body.present-mode #resizer,
body.present-mode #animation,
body.present-mode #animation-resizer {
	display: none !important;
}

body.present-mode #viewport,
body.present-mode #script,
body.present-mode #player {
	top: 0;
	right: 0;
}

#present-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 44px;
	background: rgba( 20, 20, 20, 0.85 );
	display: none;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	box-sizing: border-box;
	z-index: 50;
}

body.present-mode #present-bar {
	display: flex;
}

	#present-bar button {
		flex-shrink: 0;
		width: 28px;
		height: 28px;
		border: none;
		border-radius: 4px;
		background: rgba( 255, 255, 255, 0.12 );
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

		#present-bar button:hover {
			background: rgba( 255, 255, 255, 0.24 );
		}

	#present-bar input[type="range"] {
		flex: 1;
		accent-color: #08f;
	}

	#present-bar .present-time {
		flex-shrink: 0;
		min-width: 90px;
		text-align: right;
		font: 11px/1 monospace;
		color: #ddd;
	}

	#present-bar .present-remix {
		flex-shrink: 0;
		width: auto;
		height: 28px;
		padding: 0 14px;
		font: bold 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
		background: #08f;
	}

		#present-bar .present-remix:hover {
			background: #2a9dff;
		}

/* ── Sidebar docking position (toggled from the menubar) ─────────────────────
   Default (no body class) keeps the sidebar on the right. */

/* Sidebar docked left */
body.sidebar-left #sidebar {
	left: 0;
	right: auto;
}

body.sidebar-left #viewport,
body.sidebar-left #script,
body.sidebar-left #player,
body.sidebar-left #animation,
body.sidebar-left #animation-resizer {
	left: var( --sidebar-width );
	right: 0;
}

body.sidebar-left #resizer {
	left: var( --sidebar-width );
	right: auto;
	transform: translateX(-2.5px);
}

body.sidebar-left #toolbar {
	left: calc(50% + var( --sidebar-width ) / 2); /* centered in the viewport area (left dock) */
}

/* Inspector hidden (close button in overlay mode) */
body.sidebar-hidden #sidebar {
	display: none;
}

/* Sidebar overlay — floats freely over the viewport; JS controls left/top/width/height */
body.sidebar-overlay #sidebar {
	right: auto;
	bottom: auto;
	z-index: 5;
	box-shadow: 0 6px 28px rgba( 0, 0, 0, 0.45 );
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 280px;
	min-height: 200px;
}

/* Make the TabbedPanel fill the overlay height */
body.sidebar-overlay #sidebar .TabbedPanel {
	display: contents;
}

body.sidebar-overlay #sidebar .Tabs {
	flex-shrink: 0;
	order: 2;
}

body.sidebar-overlay #sidebar .Panels {
	position: static;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	order: 3;
}

/* Drag handle — only shown in overlay mode */
#overlay-handle {
	display: none;
}

body.sidebar-overlay #overlay-handle {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	flex-shrink: 0;
	order: 1;
	position: relative;
	background: #d4d4d4;
	border-bottom: 1px solid #bbb;
	cursor: grab;
	user-select: none;
}

body.sidebar-overlay #overlay-handle:active {
	cursor: grabbing;
	background: #c8c8c8;
}

body.sidebar-overlay #overlay-handle::after {
	content: '';
	display: block;
	width: 36px;
	height: 4px;
	border-radius: 2px;
	background: repeating-linear-gradient(
		90deg,
		#999 0 3px,
		transparent 3px 6px
	);
}

/* Close button — only shown in overlay mode */
#overlay-close {
	display: none;
}

body.sidebar-overlay #overlay-close {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY( -50% );
	width: 18px;
	height: 18px;
	border: none;
	background: transparent;
	color: #777;
	cursor: pointer;
	font-size: 12px;
	border-radius: 3px;
	padding: 0;
	line-height: 1;
}

body.sidebar-overlay #overlay-close:hover {
	background: rgba( 200, 0, 0, 0.15 );
	color: #c00;
}

/* Resize grip — only shown in overlay mode */
#overlay-grip {
	display: none;
}

body.sidebar-overlay #overlay-grip {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 18px;
	height: 18px;
	cursor: nwse-resize;
	z-index: 6;
	background: linear-gradient(
		135deg,
		transparent 40%,
		#bbb 40%, transparent 50%,
		#bbb 50%, transparent 60%,
		#bbb 60%, transparent 70%,
		#bbb 70%, transparent 80%,
		#bbb 80%, transparent 90%
	);
}

body.sidebar-overlay #viewport,
body.sidebar-overlay #script,
body.sidebar-overlay #player,
body.sidebar-overlay #animation,
body.sidebar-overlay #animation-resizer {
	left: 0;
	right: 0;
}

body.sidebar-overlay #resizer {
	display: none;
}

body.sidebar-overlay #toolbar {
	left: 50%;
}


body.sidebar-bottom #sidebar {
	left: 0;
	right: 0;
	top: auto;
	bottom: 0;
	width: 100%;
	height: var( --sidebar-height );
}

body.sidebar-bottom #viewport,
body.sidebar-bottom #script,
body.sidebar-bottom #player {
	left: 0;
	right: 0;
	bottom: var( --sidebar-height );
}

body.sidebar-bottom #animation,
body.sidebar-bottom #animation-resizer {
	display: none;
}

body.sidebar-bottom #resizer {
	top: auto;
	left: 0;
	right: 0;
	width: auto;
	height: 16px;
	bottom: var( --sidebar-height );
	transform: translateY( 8px ); /* shift DOWN so the element straddles the sidebar top edge */
	cursor: row-resize;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}

body.sidebar-bottom #resizer::after {
	content: '';
	display: block;
	width: 48px;
	height: 4px;
	border-radius: 2px;
	background: #888;
	pointer-events: none;
	transition: background 0.15s;
}

body.sidebar-bottom #resizer:hover {
	background: rgba( 0, 136, 255, 0.10 );
}

body.sidebar-bottom #resizer:hover::after,
body.sidebar-bottom #resizer:active::after {
	background: #08f;
}

body.sidebar-bottom #toolbar {
	left: 50%; /* full-width viewport */
	bottom: calc( var( --sidebar-height ) + 16px );
}

/* In bottom-dock the sidebar has a fixed height — make the panels area scrollable. */
body.sidebar-bottom .TabbedPanel .Panels {
	bottom: 0;
	overflow-y: auto;
	height: calc( var( --sidebar-height ) - 36px );
}

/* JS Shell panel */
/* Scoped under #sidebar so it outranks `#sidebar .Panel` (the Shell root is a
   UIPanel and would otherwise inherit 10px padding + a border, overflowing). */
#sidebar #shell {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: calc(100vh - 92px);   /* right/left dock: viewport minus menubar (36) + tab row (56) */
	margin: 0;
	padding: 0;
	border: 0;
	background: #1a1a2e;
	font-family: Consolas, 'Courier New', monospace;
	font-size: 13px;
	color: #ddd;
}

/* In bottom-dock the sidebar height is var(--sidebar-height); subtract the tab strip (36px). */
body.sidebar-bottom #sidebar #shell {
	height: calc( var( --sidebar-height ) - 56px );
}

#shell-header {
	display: flex;
	flex-wrap: nowrap;        /* everything stays on one line */
	align-items: center;
	column-gap: 8px;
	padding: 6px 10px;
	background: #111;
	border-bottom: 1px solid #333;
	flex-shrink: 0;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size: 12px;
	overflow: hidden;
}

#shell-header-title {
	color: #7ec8e3;
	font-weight: bold;
	flex: 0 0 auto;
}

#shell-ai-status {
	color: #6a9;
	font-size: 11px;
	flex: 0 1 auto;           /* shrinks first when space is tight */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: right;
	margin-left: 8px;
	margin-right: 6px;
}

#shell-model-select {
	background: #222;
	color: #ccc;
	border: 1px solid #444;
	border-radius: 3px;
	font-size: 11px;
	padding: 2px 4px;
	flex: 1 1 60px;           /* fills the middle, shrinks as needed */
	min-width: 0;
}

#shell-load-btn {
	background: #2a4a7f;
	color: #fff;
	border: none;
	border-radius: 3px;
	font-size: 11px;
	padding: 3px 10px;
	cursor: pointer;
	flex: 0 0 auto;
	white-space: nowrap;
}

#shell-load-btn:disabled { opacity: 0.5; cursor: default; }
#shell-load-btn:hover:not(:disabled) { background: #3a6aaf; }

/* Stop = compact red stop icon only */
#shell-stop-btn {
	background: transparent;
	color: #ff5555;
	border: none;
	border-radius: 3px;
	line-height: 0;
	padding: 3px 6px;
	cursor: pointer;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

#shell-stop-btn:disabled { opacity: 0.5; cursor: default; }
#shell-stop-btn:hover:not(:disabled) { color: #ff8888; background: rgba(255,85,85,0.12); }

/* Mutable toggle — read-only (grey) vs mutable/executes-code (amber) */
#shell-mutable-wrap {
	display: flex;
	align-items: center;
	column-gap: 4px;
	flex: 0 0 auto;
	color: #888;
	font-size: 11px;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

#shell-mutable-wrap.is-mutable { color: #e0a030; }

#shell-mutable-checkbox {
	accent-color: #e0a030;
	margin: 0;
	cursor: pointer;
}

#shell-progress-wrap {
	height: 3px;
	background: #1e2235;
	flex-shrink: 0;
}

#shell-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #7c3aed, #a78bfa);
	width: 0%;
	transition: width 0.3s;
}

#shell-output {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 12px 4px;
    user-select: text;
    -webkit-user-select: text;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

#shell-ai-row {
	display: flex;
	align-items: center;
	padding: 5px 12px;
	border-top: 1px solid #2a2a3e;
	background: #12122a;
	flex-shrink: 0;
}

#shell-ai-input {
	flex: 1;
	background: transparent;
	border: none;
	color: #c9d1d9;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size: 13px;
	outline: none;
	padding: 0;
}

#shell-ai-input::placeholder { color: #444; }
#shell-ai-input:disabled { opacity: 0.4; }

.shell-ai-label {
	color: #c9a227;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-weight: bold;
	margin-right: 8px;
}

#shell-input-row {
	display: flex;
	align-items: flex-start;
	padding: 6px 12px;
	border-top: 1px solid #333;
	background: #111;
	flex-shrink: 0;
}

.shell-prompt {
	color: #7ec8e3;
	flex-shrink: 0;
	padding-top: 2px;
	margin-right: 6px;
	user-select: none;
}

#shell-input {
	flex: 1;
	background: transparent;
	border: none;
	color: #fff;
	font-family: Consolas, 'Courier New', monospace;
	font-size: 13px;
	outline: none;
	resize: none;
	line-height: 1.5;
	max-height: 120px;
	overflow-y: auto;
	padding: 0;
}

#shell-input::placeholder {
	color: #555;
}

/* ── Shell autocomplete dropdown ─────────────────────────────────────── */

#shell-input-row {
	position: relative;
}

.shell-autocomplete {
	position: absolute;
	bottom: 100%;
	left: 30px;
	right: 12px;
	max-height: 180px;
	overflow-y: auto;
	background: #1e1e1e;
	border: 1px solid #444;
	border-radius: 4px;
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5);
	z-index: 100;
	display: none;
	font-family: Consolas, 'Courier New', monospace;
	font-size: 13px;
}

.shell-autocomplete.visible {
	display: block;
}

.shell-ac-item {
	padding: 3px 10px;
	color: #ccc;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.shell-ac-item.active {
	background: #094771;
	color: #fff;
}

.shell-ac-item:hover {
	background: #2a2d2e;
}

.shell-ac-item .shell-ac-kind {
	color: #888;
	font-size: 11px;
	margin-left: 8px;
}

.shell-ac-item .shell-ac-hint {
	color: #6a9955;
	font-size: 11px;
	margin-left: 4px;
}

.shell-line {
    display: block;
    padding: 0;
    white-space: pre-wrap;
    cursor: pointer;
    border-radius: 2px;
    min-height: 20px;
    margin-bottom: 2px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    flex: 0 0 auto;
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 5px;
}

.shell-code-block {
	width: 100%;
	height: auto;
	flex: 0 0 auto;
	overflow: hidden;
}

.shell-line:hover {
	background: rgba(255,255,255,0.05);
}

.shell-line.shell-copied {
	background: rgba(120,200,100,0.18);
}

.shell-cmd       { color: #e9e5e5;
    border-top: 1px solid rgb(51, 51, 51);
    border-bottom: 1px solid rgb(51, 51, 51);
    padding: 10px 5px !important;
    background: black;
    border-radius: 10px;
    position: relative;
    padding-right: 40px !important;
}
.shell-cmd-copy-btn {
    position: absolute;
    top: -5px;
    right: 2px;
    cursor: pointer;
    font-size: 3.1em;
    opacity: 0.7;
    user-select: none;
    transition: opacity 0.2s;
}
.shell-cmd-copy-btn:hover {
    opacity: 1;
}

#shell-unload-btn{
	background-color: #08f;
	border: 1px solid #08f;
	border-radius: 2px;
}

#shell-config-api-btn{
	background-color: #08f;
	border: 1px solid #08f;
	border-radius: 2px;
}

.shell-cmd br{
	display: block;
	height: 1px;
}
.shell-result    {     color: #79c0ff;
    overflow: visible;
    border-bottom: 1px white solid;
    padding-bottom: 10px;
    box-shadow: 0px 1px 1px black;
    margin-bottom: 10px; }
.shell-error     { color: #ff6b6b; }
.shell-info      { color: #6a737d; font-style: italic; }
.shell-ai-prompt { color: #c9a227;
    font-style: italic;
    overflow: visible;
    margin-left: -3px;
    font-size: 120%;
    margin-bottom: -5px;
}
.shell-ai-prompt::before {
    content: '[AI] ';
    font-weight: bold;
}
.shell-ai-stream { color: #7a8099; font-style: italic; white-space: pre-wrap; word-break: break-all; }

/* Cost display chips */
.shell-cost { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 0.9em; font-weight: 500; font-style: normal; cursor: pointer; transition: opacity 0.2s; }
.shell-cost:hover { opacity: 0.8; }
.shell-cost-external { background-color: rgba(255, 100, 100, 0.2); color: #ff6464; border: 1px solid #ff6464; }
.shell-cost-external:hover { background-color: rgba(255, 100, 100, 0.3); }
.shell-cost-local { background-color: rgba(100, 200, 100, 0.2); color: #64c864; border: 1px solid #64c864; }
.shell-cost-local:hover { background-color: rgba(100, 200, 100, 0.3); }

/* Toast notification */
.shell-toast { position: fixed; bottom: 20px; right: 20px; background-color: #1e1e1e; color: #fff; padding: 16px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); max-width: 400px; font-size: 0.9em; line-height: 1.5; border-left: 4px solid #ff6464; z-index: 10000; animation: slideIn 0.3s ease-out; }
.shell-toast.local { border-left-color: #64c864; }
@keyframes slideIn { from { transform: translateX(420px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(420px); opacity: 0; } }

#menubar {
	position: absolute;
	width: 100%;
	height: 36px;
	background: #eee;
	padding: 0;
	margin: 0;
	right: 0;
	top: 0;
}

	#menubar .menu {
		float: left;
		cursor: pointer;
		padding-right: 8px;
	}

	#menubar .menu.right {
		float: right;
		cursor: auto;
		padding-right: 0;
		text-align: right;
	}

		#menubar .menu .title {
			display: inline-block;
			color: #888;
			margin: 0;
			padding: 10px;
			line-height: 16px;
		}

		#menubar .menu .key {
			position: absolute;
			right: 10px;
			color: #ccc;
			border: 1px solid #ccc;
			border-radius: 4px;
			font-size: 9px;
			line-height: normal;
			padding: 2px 4px;
			right: 10px;
			pointer-events: none;
		}

		#menubar .menu .options {
			position: fixed;
			z-index: 1; /* higher than resizer */
			display: none;
			padding: 5px 0;
			background: #eee;
			min-width: 150px;
			max-height: calc(100vh - 80px);
			overflow: auto;
		}

		#menubar .menu:hover .options {
			display: block;
			box-shadow: 0 10px 10px -5px #00000033;
		}

			#menubar .menu .options hr {
				border-color: #ddd;
			}

			#menubar .menu .options .option {
				color: #666;
				background-color: transparent;
				padding: 5px 10px;
				line-height: 25px;
				margin: 0 !important;
			}

				#menubar .menu .options .option:hover {
					color: #fff;
					background-color: #08f;
				}

				#menubar .menu .options .option:not(.submenu-title):active {
					color: #666;
					background: transparent;
				}

				#menubar .menu .options .option.toggle::before {

					content: ' ';
					display: inline-block;
					width: 16px;

				}

				#menubar .menu .options .option.toggle-on::before {

					content: '✔';
					font-size: 12px;

				}

				#menubar .submenu-title::after {
					content: '⏵';
					float: right;
				}

		#menubar .menu .options .inactive {
			color: #bbb;
			background-color: transparent;
			padding: 5px 10px;
			line-height: 25px;
			margin: 0 !important;
			cursor: not-allowed;
		}

	/* Flat menubar: no expandable dropdowns — every action sits on one line */

	#menubar .menu:not(.right) .title {
		display: none;
	}

	/* Vertical separators between the File | Edit | View groups */
	#menubar .menu:not(.right) + .menu:not(.right) {
		border-left: 1px solid #ccc;
		padding-left: 8px;
	}

	#menubar .menu .options,
	#menubar .menu:hover .options {
		position: static;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 36px;
		padding: 0;
		margin: 0;
		min-width: 0;
		max-height: none;
		overflow: visible;
		background: transparent;
		box-shadow: none;
	}

		#menubar .menu .options hr,
		#menubar .menu .options .key {
			display: none;
		}

		#menubar .menu .options .option {
			cursor: pointer;
		}

		#menubar .menu .options .option,
		#menubar .menu .options .inactive {
			display: inline-flex;
			align-items: center;
			height: 36px;
			padding: 0 9px;
			line-height: normal;
			position: relative;
		}

	/* Instant CSS tooltip on hover (native title is slow/unreliable) */
	#menubar [data-tooltip] {
		position: relative;
	}

	#menubar [data-tooltip]:hover::after {
		content: attr(data-tooltip);
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 6px;
		padding: 4px 8px;
		background: #222;
		color: #fff;
		font-size: 11px;
		line-height: 1.3;
		white-space: nowrap;
		border-radius: 4px;
		box-shadow: 0 2px 6px #00000066;
		pointer-events: none;
		z-index: 10;
	}

	/* Keep right-aligned status tooltips from overflowing the viewport edge */
	#menubar .menu.right [data-tooltip]:hover::after {
		left: auto;
		right: 0;
		transform: none;
	}

		/* Toggles show their state by colouring the icon, not a checkmark */
		#menubar .menu .options .option.toggle::before {
			content: none;
			width: 0;
		}

		#menubar .menu .options .option.toggle-on {
			color: #08f;
		}

#sidebar {
	position: absolute;
	right: 0;
	top: 36px;
	bottom: 0;
	width: var( --sidebar-width );
	background: #eee;
	overflow: auto;
	overflow-x: hidden;
}

	#sidebar .Panel {
		color: #888;
		padding: 10px;
		border-top: 1px solid #ccc;
	}

	#sidebar .Panel.collapsed {
		margin-bottom: 0;
	}

	#sidebar .Row {
		display: flex;
		align-items: center;
		min-height: 24px;
		margin-bottom: 10px;
	}

	#sidebar .Row .Label {

		width: 120px;

	}

#tabs {
	background-color: #ddd;
	border-top: 1px solid #ccc;
}

	#tabs span {
		color: #aaa;
		border-right: 1px solid #ccc;
		padding: 10px;
	}

	#tabs span.selected {
		color: #888;
		background-color: #eee;
	}

#toolbar {
	position: absolute;
	left: calc(50% - var( --sidebar-width ) / 2); /* centered in the viewport area (right dock) */
	transform: translateX(-50%);
	bottom: 6px;
	height: 32px;
	background: #eee;
	text-align: center;
	display: flex;
	align-items: center;
	gap: 2px;
	border-radius: 6px;
	border: 3px solid #eee;
	overflow: hidden;
}

	#toolbar .Button, #toolbar .Input {
		height: 32px;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

		#toolbar .Button img {
			width: 16px;
			opacity: 0.5;
		}

.Outliner {
	color: #444;
	background-color: #fff;
	padding: 0;
	width: 100%;
	height: 180px;
	font-size: 12px;
	cursor: default;
	overflow: auto;
	resize: vertical;
	outline: none !important;
}

	.Outliner .option {
		padding: 4px;
		color: #666;
		white-space: nowrap;
	}

	.Outliner .option:hover {
		background-color: rgba(0,0,0,0.02);
	}

	.Outliner .option.active {
		background-color: rgba(0,0,0,0.04);
	}


.TabbedPanel .Tabs {
	background-color: #ddd;
	border-top: 1px solid #ccc;
}

	.TabbedPanel .Tab {
		color: #999;
		border-right: 1px solid #ccc;
	}

	.TabbedPanel .Tab.selected {
		color: #08f;
		background-color: rgba( 0, 136, 255, 0.10 );
		border-bottom-color: #08f;
	}

.Listbox {
	color: #444;
	background-color: #fff;
}

.Panel {
	color: #888;
}

/* */

@media all and ( max-width: 600px ) {

	#resizer {
		display: none;
	}

	#animation-resizer {
		display: none;
	}

	#menubar .menu .options {
		max-height: calc(100% - 80px);
	}

	#menubar .menu.right {
		display: none;
	}

	#viewport {
		left: 0;
		right: 0;
		top: 36px;
		height: calc(100% - 356px);
	}

	#script {
		left: 0;
		right: 0;
		top: 36px;
		height: calc(100% - 356px);
	}

	#player {
		left: 0;
		right: 0;
		top: 36px;
		height: calc(100% - 356px);
	}

	#sidebar {
		left: 0;
		width: 100%;
		top: calc(100% - 320px);
		bottom: 0;
	}

	#toolbar {
		left: 50%;
		transform: translateX(-50%);
		bottom: 330px;
	}

	#animation {
		display: none !important;
	}

}

/* DARK MODE — forced for all users (Strata is dark-only). */

@media all {

	.Button {
		color: #aaa;
		background-color: #222;
	}

		.Button:hover {
			color: #ccc;
			background-color: #444;
		}

		.Button.selected {
			color: #fff;
			background-color: #08f;
		}

	.Input, .TextArea {
		background-color: #222;
		border: 1px solid transparent;
		color: #888;
	}

	.Select {
		color: #aaa;
		background-color: #222;
		border-color: #222;
	}

		.Select:hover {
			color: #ccc;
			background-color: #444;
		}

	/* UI */

	#menubar {
		background: #111;
	}

			#menubar .menu:not(.right) + .menu:not(.right) {
				border-left-color: #333;
			}

			#menubar .menu .key {
				color: #444;
				border-color: #444;
			}

			#menubar .menu .options {
				background: #111;
			}

				#menubar .menu .options hr {
					border-color: #222;
				}

				#menubar .menu .options .option {
					color: #888;
				}

			#menubar .menu .options .inactive {
				color: #444;
			}

	#sidebar {
		background-color: #111;
	}

		#sidebar .Panel {
			border-top: 1px solid #222;
		}

		#sidebar .Panel.Material canvas {
			border: solid 1px #5A5A5A;
		}

	#animation {
		background-color: #111;
		border-top: 1px solid #222;
	}

		#animation .Panel {
			border-bottom: 1px solid #222;
		}

		#animation .timeline-container {
			background: rgba(255, 255, 255, 0.05);
		}

	#tabs {
		background-color: #1b1b1b;
		border-top: 1px solid #222;
	}

		#tabs span {
			color: #555;
			border-right: 1px solid #222;
		}

		#tabs span.selected {
			background-color: #111;
		}

	#toolbar {
		background-color: #111;
		border-color: #111;
	}

		#toolbar img {
			filter: invert(1);
		}

	.Outliner {
		background: #222;
	}

		.Outliner .option {
			color: #999;
		}

		.Outliner .option:hover {
			background-color: rgba(21,60,94,0.5);
		}

		.Outliner .option.active {
			background-color: rgba(21,60,94,1);
		}

	.TabbedPanel .Tabs {
		background-color: #1b1b1b;
		border-top: 1px solid #222;
	}

		.TabbedPanel .Tabs::-webkit-scrollbar {
			background: #111;
		}

		.TabbedPanel .Tab {
			color: #555;
			border-right: 1px solid #222;
		}

		.TabbedPanel .Tab.selected {
			color: #888;
			background-color: #111;
		}

	.Listbox {
		color: #888;
		background: #222;
	}

	.Listbox .ListboxItem:hover {
		background-color: rgba(21,60,94,0.5);
	}

	.Listbox .ListboxItem.active {
		background-color: rgba(21,60,94,1);
	}

}

/* Dialog */

.Dialog {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
}

.Dialog-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
}

.Dialog-content {
	position: relative;
	background: #eee;
	min-width: 300px;
	max-width: 90%;
	max-height: 90%;
	overflow: auto;
}

.Dialog-title {
	padding: 10px 15px;
	color: #666;
	text-transform: uppercase;
}

.Dialog-body {
	padding: 15px;
}

.Dialog-body .Row {
	display: flex;
	align-items: center;
	min-height: 24px;
	margin-bottom: 10px;
}

.Dialog-body .Row .Label {
	width: 120px;
	color: #888;
}

.Dialog-buttons {
	display: flex;
	justify-content: flex-end;
	margin-top: 15px;
}

.TextureParametersDialog-content {
	min-width: 480px;
}

.TextureParametersDialog-split {
	display: flex;
	gap: 20px;
}

.TextureParametersDialog-preview {
	flex: 0 0 auto;
}

.TextureParametersDialog-preview canvas {
	border: 1px solid #888;
	background: #000;
	display: block;
	max-width: 100%;
	height: auto;
}

.TextureParametersDialog-form {
	flex: 1 1 auto;
	min-width: 0;
}

@media all and ( max-width: 600px ) {

	.TextureParametersDialog-content {
		min-width: 0;
		width: 90vw;
	}

	.TextureParametersDialog-split {
		flex-direction: column;
	}

	.TextureParametersDialog-preview {
		align-self: center;
		max-width: 100%;
	}

}

.TextureParametersDialog-groupHeading {
	margin: 12px 0 6px;
	padding-bottom: 2px;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 11px;
	color: #666;
}

.TextureParametersDialog-groupHeading:first-child {
	margin-top: 0;
}

@media all {

	.TextureParametersDialog-groupHeading {
		border-bottom-color: #444;
		color: #888;
	}

}

.TextureSettingsButton {
	padding: 0 4px;
	line-height: 16px;
}

@media all {

	.Dialog-content {
		background: #111;
	}

	.Dialog-title {
		color: #888;
	}



}

/* Temporary Chrome fix (#24794) */

[draggable="true"] {
	transform: translate(0, 0);
	z-index: 0;
}

/* ===========================================================================
   Strata brand theme
   A cohesive re-skin layered on top of the base editor styles. It rebrands the
   accent from the stock cyan-blue to the Strata blue, cools the app chrome, and
   threads the icon's five-layer "strata" gradient through the UI. Layout and
   behaviour are untouched — colour only.
   =========================================================================== */

/* --- Accent: tabs ------------------------------------------------------- */
.TabbedPanel .Tabs::-webkit-scrollbar-thumb {
	background: var( --accent-25 );
}

.TabbedPanel .Tabs:hover::-webkit-scrollbar-thumb {
	background: var( --accent );
}

.TabbedPanel .Tabs .Tab:hover {
	color: var( --accent );
	background: var( --accent-06 );
}

.TabbedPanel .Tabs .Tab.selected {
	color: var( --accent );
	background: var( --accent-12 );
	border-bottom-color: var( --accent );
}

.TabbedPanel .Tab.selected {
	color: var( --accent );
	background-color: var( --accent-10 );
	border-bottom-color: var( --accent );
}

/* --- Accent: inputs, ranges, resizers ----------------------------------- */
.Input.Number {
	color: var( --accent ) !important;
}

#animation input[type="range"] {
	accent-color: var( --accent );
}

#resizer:hover,
#animation-resizer:hover {
	background-color: var( --accent-50 );
}

#resizer:active,
#animation-resizer:active {
	background-color: var( --accent );
}

body.sidebar-bottom #resizer:hover {
	background: var( --accent-10 );
}

body.sidebar-bottom #resizer:hover::after,
body.sidebar-bottom #resizer:active::after {
	background: var( --accent );
}

/* --- Accent: menubar ---------------------------------------------------- */
#menubar .menu .options .option:hover {
	color: var( --accent-contrast );
	background-color: var( --accent );
}

#menubar .menu .options .option.toggle-on {
	color: var( --accent );
}

/* --- Accent: selections & selected buttons ------------------------------ */
.Button.selected {
	color: var( --accent-contrast );
	background-color: var( --accent );
}

.Outliner .option:hover,
.Listbox .ListboxItem:hover {
	background-color: var( --accent-12 );
}

.Outliner .option.active,
.Listbox .ListboxItem.active {
	background-color: var( --accent-25 );
	color: #ffffff;
}

/* --- Chrome: cooler neutrals -------------------------------------------- */
#menubar,
#sidebar,
#toolbar {
	background: var( --chrome );
}

#tabs,
.TabbedPanel .Tabs {
	background-color: var( --chrome-2 );
}

/* --- Menubar: strata accent + crisp edge -------------------------------- */
#menubar {
	box-shadow: inset 0 -1px 0 var( --chrome-border );
}

#menubar .menu:first-of-type {
	margin-left: 80px;
}

#menubar::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient( 90deg,
		var( --strata-blue ),
		var( --strata-teal ),
		var( --strata-green ),
		var( --strata-orange ),
		var( --strata-red ) );
	opacity: 0.9;
	pointer-events: none;
}

/* --- Toolbar: floating brand pill --------------------------------------- */
#toolbar {
	border-color: var( --chrome );
	box-shadow: 0 2px 12px rgba( 43, 43, 47, 0.16 );
}

/* --- Buttons: subtle brand hover ---------------------------------------- */
.Button {
	border-radius: 4px;
	transition: background-color 0.15s, color 0.15s;
}

.Button:hover {
	color: var( --accent-strong );
}

/* --- Menubar logo ----------------------------------------------------- */
#menubar-logo {
	display: block;
	width: 28px;
	height: 28px;
	margin: 4px 12px 4px 8px;
	pointer-events: auto;
	flex-shrink: 0;
	position: absolute;
    transform: scale(3) translate(8px, 7px);
    overflow: visible;
	z-index: 9999;
}