:root{--bg:#0a0a0a;--panel:#141414;--text:#e8e8e8;--accent:#4db6ac;--muted:#888;--header-bg:#050505;--scene-bg:#0a0a0a}
:root{--logo-lime: #bfff00}
*{box-sizing:border-box;font-family:Inter,Arial,Helvetica,sans-serif}
/* avoid horizontal scrollbars caused by negative-positioned toggles */
/* disable page vertical scrolling; only allow internal panels to scroll */
html,body{overflow-x:hidden;overflow-y:hidden}
html,body,#app{height:100%;margin:0}
#app-header{position:fixed;left:0;right:0;top:0;height:56px;background:var(--header-bg);display:flex;align-items:center;box-shadow:0 2px 6px rgba(0,0,0,0.6);z-index:40}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 12px;width:100%}

.theme-controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.theme-label {
	font-size: 13px;
	color: var(--text);
	font-weight: 500;
	display: none; /* Hide the label text */
}

/* Custom theme dropdown */
.theme-dropdown {
	position: relative;
	display: inline-block;
	z-index: 1010;
}

.theme-dropdown-btn {
	--sz: 36px;
	width: var(--sz);
	height: var(--sz);
	padding: 0;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,0.08);
	background: var(--panel, #222);
	color: var(--text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 150ms ease;
}

.theme-dropdown-btn:hover {
	border-color: rgba(255,255,255,0.12);
	background-color: rgba(255,255,255,0.02);
}

.theme-dropdown-btn:focus {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Dropdown menu */
.theme-dropdown-menu {
	position: fixed;
	top: auto;
	right: auto;
	background: var(--panel);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 10px;
	padding: 8px;
	min-width: 150px;
	display: none;
	flex-direction: column;
	gap: 4px;
	z-index: 9999;
	box-shadow: 0 8px 24px rgba(0,0,0,0.3);
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
	transition: opacity 150ms ease, transform 150ms ease;
}

.theme-dropdown-menu.active {
	display: flex;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.theme-option {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.08);
	color: var(--text);
	padding: 10px 14px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	text-align: left;
	transition: all 150ms ease;
	font-weight: 500;
}

.theme-option:hover {
	background: rgba(255,255,255,0.08);
	border-color: rgba(255,255,255,0.15);
	color: var(--accent);
}

.theme-option.active {
	background: var(--accent);
	border-color: var(--accent);
	color: #022;
}

:root {
	--accent: #4caf50;
}

body {
	transition: background-color 220ms ease, color 220ms ease;
	background-color: var(--bg);
	color: var(--text);
}

.sr-only { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.logo{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text);font-size:18px}
.logo-img{width:20px;height:20px;display:inline-block;object-fit:contain}
.logo-mark{display:inline-block;background:linear-gradient(90deg,var(--logo-lime),#9ef200);color:#062;padding:6px 8px;border-radius:4px;font-weight:800}
.logo-text{color:var(--logo-lime);font-weight:800}
.header-actions{display:flex;gap:8px;align-items:center}
.icon-btn{background:transparent;border:0;color:var(--text);padding:6px;border-radius:6px;cursor:pointer;transition:all 150ms ease}
.icon-btn:hover{background:rgba(255,255,255,0.03);color:var(--logo-lime)}
/* ensure main app content sits below header */
#app{padding-top:72px}
#app{display:flex;gap:8px;padding:8px;background:var(--bg);position:relative}
.panel{background:var(--panel);padding:8px;border-radius:6px;color:var(--text)}
#viewer{position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden;z-index:0}
/* ensure canvas always covers the viewport */
#canvas{width:100vw;height:100vh;display:block}
#overlay{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px 12px;background:rgba(0,0,0,0.7);border-radius:6px;z-index:1001;color:var(--text);font-weight:700;font-size:14px;pointer-events:none;text-shadow:0 1px 0 rgba(0,0,0,0.7);max-width:calc(100% - 32px);text-align:center}
/* allow smooth fade in/out for overlay messages */
#overlay{opacity:1;transition:opacity 480ms ease;will-change:opacity}
/* ensure fade-out can override the #overlay rule by matching specificity */
#overlay.fade-out{opacity:0}

/* loading indicator */
#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1002;display:flex;align-items:center;gap:10px;background:rgba(0,0,0,0.72);padding:10px 14px;border-radius:8px;color:var(--text);font-weight:700}
#loading .spinner{width:18px;height:18px;border:3px solid rgba(255,255,255,0.15);border-top-color:var(--logo-lime);border-radius:50%;animation:spin 1s linear infinite}
#loading.hidden{display:none}
.loading-text{font-size:13px}
.hidden{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
#viewer.drag-over{outline:2px dashed var(--accent)}
#viewer.drag-over #overlay{left:50%;top:50%;transform:translate(-50%,-50%);padding:20px 40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;background:rgba(0,0,0,0.8);width:auto;max-width:70vw}
/* Sidebar overlays the canvas: fixed above the viewer */
/* Use content-based width so the sidebar adapts to wide property tables (clamped to 60vw) */
#sidebar{box-sizing:border-box;width:max-content;max-width:60vw;min-width:220px;display:flex;flex-direction:column;gap:8px;position:fixed;top:72px;right:12px;transition:width 240ms ease, padding 160ms ease, opacity 160ms ease;overflow:visible;z-index:998;max-height:calc(100vh - 88px)}

#tools {
	overflow-y: auto;
	padding-right: 6px;
	scrollbar-width: thin;
	-ms-overflow-style: auto;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto; /* allow tools to grow and fill sidebar */
	width: 100%;
	max-width: none;
	max-height: calc(100vh - 140px);
}

/* Ensure header and module bar don't flex and allow tools to take remaining space */
#sidebar > h2, #sidebar > .module-nav { flex: 0 0 auto; }

/* Ensure props panels and tool panels can expand to fit table content */
.props-panel{width:100%;box-sizing:border-box}

/* Allow property tables to define the sidebar width (useful for PCB layer tables) */
#sidebar .props-panel table { min-width: 0; width: max-content; }
#tools::-webkit-scrollbar{display:none;width:0;height:0}

/* collapsed state */
.collapsed{width:0 !important;padding:0 !important;min-width:0 !important}
/* hide inner content when collapsed but keep the toggle visible */
.collapsed > :not(.sidebar-toggle){visibility:hidden;opacity:0;pointer-events:none}

/* sidebar toggle tab */
.sidebar-toggle{position:fixed;top:72px;right:12px;width:34px;height:34px;border-radius:6px;border:0;background:var(--panel);color:var(--text);box-shadow:0 2px 6px rgba(0,0,0,0.4);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 160ms ease, right 160ms ease;z-index:1005}
.sidebar-toggle:hover{background:rgba(255,255,255,0.03);color:var(--logo-lime)}

/* when sidebar is collapsed, move toggle to the edge */
#sidebar.collapsed ~ .sidebar-toggle{transform:rotate(180deg);opacity:1;pointer-events:auto}

/* ensure toggle stays above collapsed sidebar content */
.sidebar-toggle{z-index:1005}
#tools button{margin:4px 4px 0 0;padding:8px;border-radius:4px;border:0;background:var(--panel);color:var(--text);cursor:pointer;transition:all 150ms ease}
#tools button:hover{background:rgba(255,255,255,0.08);color:var(--text)}
#tools button.active{background:var(--accent);color:#022}

/* hide original navigation buttons (we provide bottom-right nav) */
#tool-orbit, #tool-transform { display: none !important }

/* bottom-right navigation */
.bottom-nav, #bottom-nav { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 1010; display:flex; gap:8px; align-items:center }
.nav-btn{width:44px;height:44px;border-radius:8px;border:0;background:rgba(0,0,0,0.6);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all 150ms ease}
.nav-btn:hover{background:rgba(255,255,255,0.03);color:var(--logo-lime)}
.nav-btn.active{background:var(--logo-lime);color:#062}

/* new tool panel styling */
.tool-panel{display:flex;flex-direction:column;gap:8px}
.tool-group{background:rgba(255,255,255,0.02);padding:6px;border-radius:6px}
.group-title{font-size:12px;color:var(--muted);margin-bottom:6px}
.tool-btn{display:inline-block;margin:4px 6px 0 0;padding:8px;border-radius:6px;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;transition:all 200ms cubic-bezier(0.4, 0, 0.2, 1);position:relative;overflow:hidden}
.tool-btn:hover{background:rgba(255,255,255,0.08);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.tool-btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0,0,0,0.1)}
.tool-btn.active{background:var(--accent);color:#022;border-color:var(--accent);box-shadow:0 4px 16px rgba(0,0,0,0.2)}
.tool-btn.active:hover{background:var(--accent);opacity:0.9;transform:translateY(-2px)}
/* make SVG icons inside tool buttons larger while keeping button size unchanged */
.tool-btn svg{ width:22px; height:22px; display:block; color:inherit }
/* ensure inner SVG shapes use currentColor so icons reflect button color changes */
.tool-btn svg *{ stroke: currentColor; fill: currentColor; transition: stroke 160ms ease, fill 160ms ease }
/* ensure active buttons force icon color even if SVG has inline attributes */
.tool-btn.active svg, .tool-btn.active svg *{ stroke: currentColor !important; fill: currentColor !important }

/* Reduce icon size specifically for PLM load buttons and detail overlay */
#plm-panel .tool-btn svg,
.plm-detail-overlay .tool-btn svg {
	width:16px;
	height:16px;
}

/* Make PLM action buttons (icon-only) more compact */
#plm-panel .tool-btn,
.plm-detail-overlay .tool-btn {
	padding:6px;
	margin:4px 4px 0 0;
	min-width:30px;
	height:30px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}

/* subtle style for disabled/low-opacity table rows */
.dimmed{opacity:0.45}
#object-table{width:100%;border-collapse:collapse;font-size:13px}
#object-table th,#object-table td{padding:6px;border-bottom:1px solid rgba(255,255,255,0.08);text-align:left;color:var(--text)}
#object-table input{width:100px;background:var(--bg);color:var(--text);border:1px solid rgba(255,255,255,0.1);padding:2px}

/* simple tree view */
.tree-root{list-style:none;padding:0;margin:0;max-height:calc(60vh);overflow:auto;border-radius:6px;padding:6px;text-align:left}
.tree-root > li{padding:6px 6px;background:transparent;border-radius:4px;margin-bottom:2px}
.tree-file{font-weight:700;display:flex;justify-content:flex-start;align-items:center;cursor:pointer}
.tree-file .toggle{margin-left:8px}
.tree-children{list-style:none;padding-left:12px;margin-top:4px}
.tree-item{padding:4px 6px;border-radius:4px;cursor:pointer}
.tree-item:hover{background:rgba(255,255,255,0.02)}
.tree-item.active{background:rgba(75,182,172,0.12);color:var(--logo-lime)}

/* Tree labels visible and colored to match header accent */
.tree-file > span:not(.module-icon):not(.toggle),
.tree-item > span {
 	position: static;
 	left: auto;
 	width: auto;
 	height: auto;
 	overflow: visible;
 	color: var(--logo-lime);
 	font-size: 10px;
}

/* Keep module icon and toggle visible and centered */
.tree-file { gap: 4px; }
.tree-file .module-icon { display: inline-flex; align-items: center; justify-content: center; }
.tree-file .toggle { font-size: 12px; opacity: 0.9; }

/* place the toggle icon visually at the far left of the row */
.tree-file { display:flex; align-items:center }
.tree-file .toggle { order: -2; margin-left: 0; margin-right: 8px; }

/* Style checkboxes as compact icons */
.tree-item input[type="checkbox"] {
	width: 14px; height: 14px; margin-right: 8px; accent-color: var(--logo-lime);
}

/* Show connector lines for tree (root and subfolders) */
.tree-root, .tree-children { position: relative; padding-left: 10px; }
.tree-root::before, .tree-children::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: rgba(255,255,255,0.06);
	border-radius: 1px;
}
.tree-children > li { position: relative; }
.tree-children > li::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 50%;
	width: 8px;
	height: 1px;
	background: rgba(255,255,255,0.06);
	transform: translateY(-50%);
}

/* Slightly reduce spacing so the icon+arrow look compact */
.tree-file, .tree-item { padding: 2px 4px; font-size: 10px; gap:6px }

/* Hide native scrollbars but keep scroll functionality (cross-browser) */
.tree-root, .tree-children, .tree-overlay, .module-example, .terminal-body {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}
.tree-root::-webkit-scrollbar, .tree-children::-webkit-scrollbar, .tree-overlay::-webkit-scrollbar, .terminal-body::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
	width: 0; height: 0;
}

/* Hide scrollbars for PLM panel and its internal scrollable areas */
#plm-panel, #plm-panel * {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
#plm-panel::-webkit-scrollbar, #plm-panel *::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
  width: 0; height: 0;
}

/* PLM detail overlay (expanded component view) */
.plm-detail-overlay {
	box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.plm-detail-overlay img { max-width: 100%; height: auto; display: block }
.plm-detail-overlay pre { white-space: pre-wrap; word-break: break-word; font-family: monospace }

/* Reusable truncation helpers for single-line ellipsis */
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle}
.truncate.short{max-width:220px}
.truncate.medium{max-width:320px}
.truncate.long{max-width:420px}

/* Ensure PLM panel fills the tools container when inserted */
#plm-panel { width: 100% !important; box-sizing: border-box; height: 100% !important; display: flex; flex-direction: column; }
#plm-panel > div { width: 100%; }

/* make results area fill remaining space and scroll internally */
.plm-results { flex: 1 1 auto; overflow: auto; display: grid; width: 100%; box-sizing: border-box; }
.plm-container { display: flex; flex-direction: column; height: 100%; }

/* Prevent PLM panel from resizing the sidebar — fix its height and let
	 internal .plm-results scroll. This keeps the sidebar dimensions stable
	 regardless of gallery content. */
#plm-panel {
	max-height: calc(100vh - 140px) !important; /* leave space for header/top padding */
	overflow: hidden !important;
}

/* Ensure results area scrolls internally and doesn't expand the parent */
.plm-results { flex: 1 1 auto; overflow: auto; display: grid; width: 100%; box-sizing: border-box; }

/* Smooth automatic scrolling */
.tree-root, .tree-children, .terminal-body { scroll-behavior: smooth; }

/* AI chat floating button and panel */
#ai-bot-btn{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;border:0;background:linear-gradient(90deg,var(--logo-lime),#9ef200);color:#062;font-size:22px;display:flex;align-items:center;justify-content:center;z-index:1100;cursor:pointer;box-shadow:0 8px 24px rgba(11,22,18,0.6)}
#ai-bot-btn.active{box-shadow:0 12px 30px rgba(40,140,100,0.45);transform:scale(0.98)}

#ai-chat{position:fixed;right:18px;bottom:86px;width:320px;max-width:90vw;height:420px;display:none;flex-direction:column;background:rgba(12,12,12,0.98);border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,0.6);z-index:1101;overflow:hidden;border:1px solid rgba(255,255,255,0.04)}
#ai-chat.open{display:flex}
#ai-chat .ai-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent)}
#ai-chat .ai-title{font-weight:700;color:#e6fff6}
#ai-chat .ai-close{background:transparent;border:0;color:#ddd;cursor:pointer;font-size:14px}
#ai-chat .ai-messages{flex:1;padding:10px;display:flex;flex-direction:column;gap:8px;overflow:auto;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.02))}
.ai-msg{display:flex}
.ai-bubble{max-width:86%;padding:8px 10px;border-radius:10px;color:#e9f7f2}
.ai-bubble.user{margin-left:auto;background:linear-gradient(180deg,#1f7a66,#165c4b);color:#dff7ef}
.ai-bubble.assistant{margin-right:auto;background:rgba(255,255,255,0.03);color:#e6fff6}
.ai-text{white-space:pre-wrap;word-break:break-word;font-size:13px}
#ai-chat .ai-form{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(255,255,255,0.02);background:linear-gradient(180deg,transparent,rgba(0,0,0,0.02))}
.ai-input{flex:1;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:#071017;color:#e6fff6;resize:vertical}
.ai-send{background:linear-gradient(90deg,var(--logo-lime),#9ef200);color:#022;border:0;padding:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer}
.ai-send svg{width:18px;height:18px;display:block;color:inherit}

@media (max-width:420px){
	#ai-chat{right:10px;left:10px;width:auto;bottom:86px}
	#ai-bot-btn{right:10px;bottom:10px}
}

/* overlay styles for the CAD tree inside the viewer */
.tree-overlay{position:absolute;left:56px;top:84px;max-width:320px;min-width:180px;z-index:1000;pointer-events:auto;padding:6px;border-radius:8px;background:rgba(0,0,0,0.18);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,0.03);color:var(--text)}
.tree-overlay .tree-root{max-height:80vh}

/* properties overlay in viewer */
.props-overlay{position:absolute;right:12px;top:84px;z-index:1004;min-width:220px;max-width:320px;padding:10px;border-radius:8px;background:rgba(10,10,10,0.78);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.04);color:var(--text)}
.props-overlay h4{margin:0 0 8px 0;font-size:13px}
.props-overlay label{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.props-overlay input[type="text"], .props-overlay input[type="number"], .props-overlay input[type="color"], .props-overlay select{width:100%;padding:6px;border-radius:4px;border:1px solid #2b2b2b;background:#0b0b0b;color:#fff}
.props-overlay .row{display:flex;gap:8px}
.props-overlay .small{flex:1}
.props-overlay .actions{display:flex;gap:8px;margin-top:10px}
.props-overlay button{padding:6px 8px;border-radius:6px;border:0;background:var(--panel);color:var(--text);cursor:pointer;transition:all 150ms ease}
.props-overlay button:hover{background:rgba(255,255,255,0.05)}
.props-overlay button.primary{background:var(--accent);color:#022}
.props-overlay .hidden{display:none}

.dim-label{position:absolute;color:var(--text);background:rgba(0,0,0,0.6);padding:2px 6px;border-radius:4px;font-size:12px}

.module-arrow{position:absolute;top:72%;transform:translateY(-50%);width:40px;height:64px;border-radius:6px;border:0;background:rgba(0,0,0,0.45);color:#fff;font-size:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1006}
.module-arrow:hover{background:rgba(0,0,0,0.6);color:var(--logo-lime)}
#module-left{left:8px}
#module-right{right:8px}

/* module badge showing active module name */
.module-badge{position:absolute;left:50%;top:18px;transform:translateX(-50%);background:rgba(0,0,0,0.6);color:#fff;padding:8px 12px;border-radius:6px;font-weight:700;z-index:1007;pointer-events:none;transition:opacity 280ms ease, transform 280ms ease}
.module-badge.hidden{opacity:0;transform:translateX(-50%) translateY(-6px);visibility:hidden}
.module-badge{opacity:1;visibility:visible}

/* module quick-nav in header */
.module-nav{display:flex;gap:6px;align-items:center;margin-left:12px}
.module-btn{width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text);display:inline-flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;transition:all 150ms ease}
.module-btn:hover{background:rgba(255,255,255,0.03);color:var(--accent)}
.module-btn.active{background:var(--accent);color:#022;border-color:transparent}
.module-btn .abbr{font-weight:700}
.module-btn svg{width:18px;height:18px;display:block;stroke:currentColor;fill:none}
.module-btn svg path{stroke:currentColor}
.module-btn svg rect{stroke:currentColor}

/* module icons inside the tree view */
.tree-file .module-icon{display:inline-flex;align-items:center;color:var(--text);width:16px;height:16px}
.tree-file .module-icon svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none}
.tree-file .module-icon svg path{stroke:currentColor}
.tree-file .module-icon svg rect{stroke:currentColor}

/* Buttons placed in the tree root (edit / save). Make them square and match tree text color */
.tree-root-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:20px;
	height:20px;
	padding:0;
	margin-left:6px;
	border:0;
	background:transparent;
	color:inherit; /* inherit color from parent (tree text color) */
	font-size:12px;
	line-height:1;
	cursor:pointer;
}
.tree-root-btn:hover{background:rgba(255,255,255,0.03); border-radius:3px}

/* delete button in tree */
.tree-delete{display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.7);background:transparent;border:0;padding:2px;border-radius:4px}
.tree-delete:hover{color:#ff6b6b;background:rgba(255,255,255,0.02)}