#editor-root{position:absolute;inset:0;z-index:10;pointer-events:none;font-size:13px;}
#editor-root.hidden{display:none;}

#topbar{
  position:absolute;top:0;left:0;right:0;height:50px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;background:rgba(17,21,28,.92);border-bottom:1px solid var(--line);
  pointer-events:auto;backdrop-filter:blur(6px);
}
.brand{font-weight:800;letter-spacing:.04em;font-size:14px;color:var(--text);}
.brand span{color:var(--accent);}
.topbar-actions{
  display:flex;gap:6px;
  overflow-x:auto;overflow-y:hidden;
  flex-wrap:nowrap;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  min-width:0; /* lets it actually shrink below content width inside the flex topbar */
}
.topbar-actions::-webkit-scrollbar{height:4px;}
.topbar-actions::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:2px;}
.topbar-actions .btn{flex-shrink:0;}

.panel{
  position:absolute;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;pointer-events:auto;overflow:hidden;display:flex;flex-direction:column;
}
.panel-title{
  padding:8px 10px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--line);
  background:var(--panel-2);
}

/* ---- view bar: 3D / Top / Side + grid size ---- */
#viewbar{
  top:60px;left:10px;flex-direction:row;align-items:center;gap:6px;padding:6px 8px;width:auto;
}
.view-btn{
  background:var(--panel-2);border:1px solid var(--line);color:var(--text-dim);
  border-radius:6px;padding:6px 10px;font-size:11px;font-weight:700;
}
.view-btn.active{background:var(--accent);border-color:var(--accent);color:#1a0e02;}
.viewbar-sep{width:1px;height:20px;background:var(--line);margin:0 2px;}
.viewbar-grid-label{font-size:10px;color:var(--text-dim);text-transform:uppercase;}
#grid-size{width:54px;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:6px;padding:5px 6px;font-size:12px;}

/* ---- single tabbed dock: replaces the old toolbar/inspector/layers/settings panels ---- */
#dock{
  bottom:10px;left:10px;right:10px;max-width:380px;height:46vh;max-height:480px;
}
#dock-tabs{display:flex;border-bottom:1px solid var(--line);background:var(--panel-2);overflow-x:auto;flex:0 0 auto;}
.dock-tab{
  flex:1;background:transparent;border:none;color:var(--text-dim);
  padding:10px 6px;font-size:11px;font-weight:700;letter-spacing:.03em;
  border-bottom:2px solid transparent;white-space:nowrap;
}
.dock-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
#dock-body{flex:1 1 auto;overflow:hidden;position:relative;}
.dock-pane{position:absolute;inset:0;overflow-y:auto;padding:10px;display:none;}
.dock-pane.active{display:block;}

#add-buttons.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
#add-buttons button{
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  border-radius:8px;padding:9px 4px;font-size:11px;font-weight:600;
}
#add-buttons button:active{background:var(--accent-dim);border-color:var(--accent);}
#add-buttons button.tool-active{background:var(--accent);border-color:var(--accent);color:#1a0e02;}
.dock-hint{font-size:10px;color:var(--text-dim);margin:-2px 0 8px;}

.layer-row{display:flex;align-items:center;justify-content:space-between;padding:5px 4px;border-radius:6px;font-size:12px;}
.layer-row:hover{background:var(--panel-2);}

.field{margin-bottom:8px;}
.field label{display:block;font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;}
.field input[type=text], .field input[type=number], .field select{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);
  border-radius:6px;padding:5px 7px;font-size:12px;
}
.vec3{display:flex;gap:4px;}
.vec3 input{width:33%;text-align:center;}
.field input[type=file]{font-size:10px;color:var(--text-dim);width:100%;}
.field textarea.code-editor{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);
  border-radius:6px;padding:7px 8px;font-size:11px;line-height:1.4;resize:vertical;
  font-family:"SFMono-Regular",Consolas,Menlo,monospace;
}
.row{display:flex;gap:6px;}
.row > *{flex:1;}
.obj-list-item{display:flex;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px dashed var(--line);}
.tiny{font-size:10px;color:var(--text-dim);}
.swatch-btn{padding:6px;font-size:11px;border-radius:6px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);}
.swatch-btn.active{background:var(--accent);border-color:var(--accent);color:#1a0e02;}
.selected-tag{display:inline-block;background:var(--accent-dim);color:var(--accent);padding:2px 6px;border-radius:5px;font-size:10px;font-weight:700;}
.danger-btn{background:rgba(255,84,112,.15);border-color:var(--danger);color:var(--danger);}
.section-divider{border-top:1px dashed var(--line);margin:10px 0;padding-top:8px;}
.checkbox-row{display:flex;align-items:center;gap:7px;margin-bottom:8px;}
.checkbox-row label{font-size:11px;color:var(--text);text-transform:none;letter-spacing:0;margin:0;}

#toast{
  position:absolute;left:50%;bottom:50vh;transform:translateX(-50%);
  background:rgba(20,24,32,.95);border:1px solid var(--accent);color:var(--text);
  padding:9px 16px;border-radius:8px;font-size:12px;font-weight:600;pointer-events:none;
  z-index:40;transition:opacity .25s;
}
#toast.hidden{display:none;}

@media (max-width:760px){
  #viewbar{flex-wrap:wrap;max-width:92vw;}
  #dock{left:8px;right:8px;max-width:none;height:40vh;}
}
@media (min-width:761px){
  #dock{left:auto;right:10px;width:300px;}
}

/* ---- New additions for v4 features ---- */

.section-divider {
  border-top: 1px solid #2a3040;
  margin-top: 10px;
  padding-top: 8px;
}

.section-divider > label.tiny {
  display: block;
  color: #6a7a9a;
  font-size: 10px;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

/* Color picker rows */
.field input[type="color"] {
  background: none;
  padding: 1px;
  cursor: pointer;
}

/* Waypoint gizmo color */
/* (just CSS note, color set in JS) */

/* Active scheme / mode button */
.tool-active {
  background: #3b6be0 !important;
  color: #fff !important;
}

/* ---------------- Help tab ---------------- */
.help-content {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  padding-bottom: 24px;
}
.help-content h3 {
  font-size: 13px;
  color: var(--accent);
  margin: 18px 0 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.help-content h3:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.help-content h4 {
  font-size: 12px;
  color: var(--text);
  margin: 12px 0 4px;
}
.help-content p {
  margin: 0 0 8px;
  color: var(--text-dim);
}
.help-content ul {
  margin: 0 0 8px;
  padding-left: 18px;
  color: var(--text-dim);
}
.help-content li {
  margin-bottom: 4px;
}
.help-content li > b,
.help-content p > b {
  color: var(--text);
}
.help-content code {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
}
.help-content .help-tip {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 6px 0 12px;
  color: var(--text-dim);
}
.help-content summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--accent);
  padding: 8px 0;
  border-top: 1px dashed var(--line);
  list-style: none;
}
.help-content summary::-webkit-details-marker { display: none; }
.help-content summary::before {
  content: "▸ ";
}
.help-content details[open] summary::before {
  content: "▾ ";
}
.help-content details:first-of-type summary {
  border-top: none;
}


/* ---- Collapsible dock (click active tab to minimize/maximize) ---- */
#dock {
  transition: height 0.22s cubic-bezier(0.4,0,0.2,1),
              max-height 0.22s cubic-bezier(0.4,0,0.2,1);
}
#dock.dock-collapsed {
  height: auto !important;
  max-height: none !important;
}
#dock.dock-collapsed #dock-body {
  display: none;
}
#dock-tabs .dock-tab {
  position: relative;
}
/* Show a subtle ▾ indicator on the active tab when expanded */
#dock:not(.dock-collapsed) .dock-tab.active::after {
  content: " ▾";
  font-size: 9px;
  opacity: 0.55;
}
/* Show ▸ when collapsed */
#dock.dock-collapsed .dock-tab.active::after {
  content: " ▸";
  font-size: 9px;
  opacity: 0.55;
}

/* ---- Level Settings tab ---- */
#level-settings-body .rebuild-hint {
  font-size: 10px;
  color: var(--text-dim);
  margin: 3px 0 8px;
  line-height: 1.4;
}