@import "reset.css";
@import "themes.css";
@import "../js/lib/font-awsome/css/all.min.css";
@import "font-awesome.min.css";

/* ============================================ */
/* SPLASH SCREEN                                */
/* ============================================ */
#splash-screen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99999;
  background: #0a0a0f;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease-out;
}
#splash-screen.splash-fadeout {
  opacity: 0;
  pointer-events: none;
}
.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 460px;
  padding: 40px;
  background: linear-gradient(145deg, #111118 0%, #0d0d14 100%);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.splash-logo-card {
  background: #fff;
  border-radius: 10px;
  padding: 14px 20px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4);
  animation: splashLogoIn 0.8s ease-out;
}
.splash-logo {
  max-width: 360px;
  max-height: 130px;
  height: auto;
  object-fit: contain;
  display: block;
}
@keyframes splashLogoIn {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.splash-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: splashInfoIn 0.6s ease-out 0.3s both;
}
@keyframes splashInfoIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.splash-version {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.splash-loading {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.splash-loading-bar {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.splash-loading-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #c0392b, #4a90d9);
  border-radius: 2px;
  transition: width 0.3s ease-out;
  animation: splashLoadProgress 2.5s ease-in-out forwards;
}
@keyframes splashLoadProgress {
  0% { width: 0%; }
  20% { width: 25%; }
  50% { width: 55%; }
  70% { width: 75%; }
  90% { width: 90%; }
  100% { width: 100%; }
}
.splash-loading-text {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.5px;
}
.splash-copyright {
  font-size: 11px;
  color: rgba(255,255,255,0.2);
  margin-top: 4px;
}

/** Font inclusions **/
@font-face {
  font-family: "Inconsolata-g";
  src: url("../fonts/Inconsolata-g for Powerline.otf") format("opentype");
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.ttf") format("truetype");
}

/** General **/
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
body {
  margin: 0;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  overflow: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
}
h1 {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--text-primary);
}
h2 {
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}
button {
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}
.center {
  text-align: center;
}

/* ---- Layout ---- */
.col {
  top: 0;
  bottom: 0;
  overflow: hidden;
  position: absolute;
}
.main {
  left: 0;
  right: 30em;
}

/* ---- Sidebar ---- */
.sidebar {
  background: var(--sidebar-bg);
  border-left: 3px solid var(--sidebar-border);
  width: 30em;
  right: 0;
  color: var(--text-primary);
  overflow-y: auto;
}
.sidebar > * {
  margin: 1em;
}
.sidebar-header {
  background: var(--sidebar-header-bg);
  margin: 0;
  padding: 0.75em;
}

/* ---- Sidebar Controls (Toolbar Buttons) ---- */
.sidebar-controls {
  margin: 0;
  text-align: center;
  display: flex;
  align-items: center;
  background: var(--toolbar-bg);
  gap: 1px;
}

/* ---- Main Toolbar (top bar with groups) ---- */
.main-toolbar {
  padding: 3px 6px;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  position: relative;
}
.main-toolbar .toolbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}
/* Toolbar group labels */
.toolbar-group-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, rgba(255,255,255,0.35));
  opacity: 0.6;
  padding: 0 4px 0 2px;
  white-space: nowrap;
  user-select: none;
}

/* History panel entries */
.history-entry {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: background 0.15s;
}
.history-entry:hover {
  background: var(--surface-3, #2a2a3e);
}
.history-entry.history-current {
  background: var(--accent, #4d9bec);
  color: #fff;
  font-weight: 600;
}
.history-entry.history-future {
  opacity: 0.35;
}
.history-time {
  margin-left: auto;
  font-size: 10px;
  opacity: 0.5;
}
.toggle-active {
  background: var(--accent, #4d9bec) !important;
  color: #fff !important;
}

.main-toolbar .toolbar-right {
  margin-left: auto;
  border-right: none;
  border-left: 1px solid var(--border-subtle);
  padding-left: 8px;
  padding-right: 0;
  margin-right: 0;
}
.toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 8px;
  margin-right: 4px;
  border-right: 1px solid var(--border-subtle);
}
.toolbar-group:last-of-type {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

.sidebar-controls > button,
.sidebar-controls button,
.toolbar-group > button {
  height: auto;
  font: inherit;
  font-size: 0.82em;
  border: none;
  background: var(--toolbar-btn-bg);
  outline: none;
  color: var(--toolbar-btn-text);
  transition: all var(--transition-fast);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  white-space: nowrap;
  cursor: pointer;
}
.sidebar-controls > button:hover,
.sidebar-controls button:hover,
.toolbar-group > button:hover {
  background: var(--toolbar-btn-hover);
  color: var(--text-primary);
}
.sidebar-controls > button:active,
.sidebar-controls button:active,
.toolbar-group > button:active {
  background: var(--toolbar-btn-active);
}
.sidebar-controls > button.no-padding {
  padding: 0;
}

/* Secondary toolbar rows (scene actions, treetool) */
.sidebar-controls:not(.main-toolbar) > button {
  flex: 1;
  border-radius: 0;
}

/* ---- Canvas ---- */
#field {
  outline: none;
  background: var(--canvas-bg);
}

/* ---- Properties Table ---- */
.sidebar-properties > * {
  margin-bottom: 0.4em;
}
#properties-table {
  color: var(--text-primary);
  border: 1px solid var(--table-border);
  width: 100%;
  height: 16em;
  overflow-y: scroll;
  background: var(--table-bg);
}
.table-row {
  display: flex;
  border-bottom: 1px solid var(--table-border);
  height: auto;
}
.table-col {
  display: flex;
  position: relative;
  border-right: 1px solid var(--table-border);
  background: var(--table-row-bg);
  height: auto;
  flex: 3;
  align-items: center;
}
.table-col.prop_common {
  background: var(--table-header-bg);
}
.table-col:first-child {
  padding: 0.2em;
  flex: 1;
}
#properties-table input {
  background: inherit;
  margin: 0;
  padding: 0.2em;
  border: none;
  width: 100%;
  font: inherit;
  color: var(--input-text);
}

/* ---- Circle Buttons ---- */
.circle-button {
  border: none;
  border-radius: 1em;
  outline: none;
  text-align: center;
  height: 1.7em;
  transition: all var(--transition-fast);
}
.circle-button.remove {
  background: var(--danger);
  color: white;
}
.circle-button.remove:hover {
  background: var(--danger-hover);
}
.circle-button.remove:active {
  background: var(--danger-hover);
  filter: brightness(1.1);
}
.circle-button.add {
  background: var(--success);
  color: white;
}
.circle-button.add:hover {
  background: var(--success-hover);
}
.circle-button.add:active {
  background: var(--success-hover);
  filter: brightness(1.1);
}
#properties-table button {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

/* ---- Events Editor ---- */
.sidebar-events > * {
  margin-bottom: 0.4em;
}
#event-editor {
  width: 100%;
  height: 25em;
  font-family: "Inconsolata-g", Consolas, monospace;
  font-size: 0.8em;
  line-height: 1.1em;
  resize: vertical;
  border: 0;
  box-sizing: border-box;
  display: block;
  background: var(--input-bg);
  color: var(--text-primary);
}

/* ---- Tab View ---- */
.tab-view {
  display: flex;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}
.tab-view > input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
  flex: 0;
}
.tab-view > input:checked + label {
  background: var(--tab-bg-active);
  color: var(--tab-text-active);
}
.tab-view > label {
  height: 2em;
  font-size: 0.9em;
  flex: 1;
  border: none;
  background: var(--tab-bg);
  outline: none;
  border-left: 1px solid var(--tab-border);
  color: var(--tab-text);
  font: inherit;
  border-bottom: 3px solid var(--tab-indicator);
  text-align: center;
  cursor: pointer;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  transition: all var(--transition-fast);
}
.tab-view > label:first-of-type {
  border-left: none;
}

/* ---- Event Apply Button ---- */
#event-apply-button {
  width: 90%;
  display: block;
  border: none;
  font: inherit;
  padding: 0.4em;
  outline: none;
  background: var(--btn-bg);
  color: var(--btn-text);
  margin-top: 3px;
  margin-bottom: 3px;
  transition: all var(--transition-fast);
}
#event-apply-button:hover {
  background: var(--btn-bg-hover);
}
#event-apply-button:active {
  background: var(--btn-bg-active);
  outline: none !important;
}

/* ---- FAB Button ---- */
.fab {
  width: auto;
  height: auto;
  padding: 12px 18px;
  background-color: var(--fab-bg);
  border-radius: 14px;
  transition: all 0.15s ease;
  font-size: 1.2em;
  color: var(--fab-text);
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  border: none;
}
.fab:hover {
  transform: translateY(-2px);
  background-color: var(--fab-hover);
  box-shadow: var(--shadow-lg);
}

/* ---- Thumbnails / Build Grid ---- */
.thumbnails {
  list-style: none;
  overflow: hidden;
  padding: 5px;
}
.thumbnails li {
  float: left;
  width: 33.3%;
  position: relative;
  padding: 1px;
  min-height: 150px;
  background-color: var(--surface-2);
  border: 1px solid var(--border-primary);
  overflow: hidden;
  color: var(--text-primary);
}
.thumbnails li img {
  max-width: 100%;
  display: block;
  position: absolute;
  max-height: 100px;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
}

button > a:hover {
  text-decoration: none !important;
}

audio::-webkit-media-controls-mute-button {
  display: none !important;
}
audio::-webkit-media-controls-volume-slider {
  display: none !important;
}

/* ---- Scrollbar (modern thin) ---- */
::-webkit-scrollbar {
  height: 5px !important;
  width: 5px !important;
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb) !important;
  border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover) !important;
}
::-webkit-scrollbar-corner {
  background: var(--scrollbar-corner) !important;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track) !important;
}

/* ---- Icon Rotations ---- */
.fa-rotate-l {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.fa-rotate-r {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* ---- Event Editor Buttons ---- */
#EventEditor button {
  color: var(--btn-text);
  background: var(--btn-bg);
  border: 1px solid var(--border-primary);
  margin-top: 1px;
  margin-bottom: 1px;
  transition: all var(--transition-fast);
}
#EventEditor button:hover {
  background: var(--btn-bg-hover);
}

#EventEditor select {
  background: var(--select-bg);
  color: var(--select-text);
  border: 1px solid var(--select-border);
  padding: 2px 4px;
  font: inherit;
}

/* ---- Tree Tool ---- */
#treetool button {
  height: 35px !important;
}

/* ---- Loading Screen ---- */
#loading {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: var(--loading-bg);
  background-image: url("../img/logo.png"), url("../img/start.gif");
  background-repeat: no-repeat;
  background-position: center, bottom;
}

/* ---- Godot Layout Panels ---- */
#panel-left, #panel-right, #output-area {
  /* Transition is applied dynamically via JS, but overflow:hidden during collapse */
}
#panel-left {
  display: flex;
  flex-direction: column;
}
#panel-left .litetabs {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#panel-left .wtabcontent {
  flex: 1;
  overflow: auto;
}
#treetool {
  flex-shrink: 0;
}
#treetool button:hover {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.9) !important;
}

/* ---- Panel collapse/expand buttons ---- */
.panel-collapse-btn {
  position: absolute;
  z-index: 200;
  background: var(--surface-2, #252525);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text-secondary, rgba(255,255,255,0.7));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, opacity 0.25s ease;
  user-select: none;
  font-size: 9px;
  line-height: 1;
  opacity: 0.6;
  pointer-events: auto;
}
/* Left & right: vertical pill */
.panel-collapse-btn[data-direction="left"],
.panel-collapse-btn[data-direction="right"] {
  width: 16px;
  height: 40px;
}
/* Bottom: horizontal pill */
.panel-collapse-btn[data-direction="bottom"] {
  width: 40px;
  height: 16px;
}
.panel-collapse-btn:hover {
  opacity: 1;
  background: var(--accent-primary, #4d9bec);
  color: #fff;
  box-shadow: 0 0 8px rgba(77,155,236,0.5);
  transform: scale(1.15);
}
.panel-collapse-btn:active {
  transform: scale(0.9);
}
/* Collapsed state — always bright and pulsing */
.panel-collapse-btn.collapsed {
  opacity: 1 !important;
  background: var(--accent-primary, #4d9bec);
  color: #fff;
  border-color: var(--accent-primary-hover, #5eaaff);
  animation: collapse-pulse 2s ease-in-out infinite;
}
@keyframes collapse-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(77,155,236,0.3); }
  50% { box-shadow: 0 0 12px rgba(77,155,236,0.7); }
}

/* ---- Left splitter ---- */
#left-splitter:hover {
  background: var(--accent-primary) !important;
}

/* ---- Bottom output tabs fix ---- */
#output-area .litetabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#output-area .wtabcontent {
  flex: 1;
  overflow: hidden;
}

/* ---- Tab bar bottom margin ---- */
.litetabs ul.wtabcontainer {
  margin-bottom: 2px;
}

/* ---- Right panel (no double scrollbar) ---- */
#panel-right .litetabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#panel-right .wtabcontent {
  flex: 1;
  overflow: auto;
}
#panel-right ul.wtabcontainer {
  flex-shrink: 0;
}

/* ---- Dock Manager: Split Highlight ---- */
.dock-split-highlight {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  background: rgba(77, 155, 236, 0.15);
  border: 2px solid rgba(77, 155, 236, 0.5);
  border-radius: 3px;
  transition: left 0.1s ease-out, top 0.1s ease-out, width 0.1s ease-out, height 0.1s ease-out;
}

/* Dock split containers */
.dock-split {
  display: flex;
  overflow: hidden;
}

/* Splitters between docked panels */
.dock-splitter {
  flex: 0 0 4px;
  background: #333;
  z-index: 5;
  transition: background 0.15s;
}
.dock-splitter-h { cursor: col-resize; }
.dock-splitter-v { cursor: row-resize; }
.dock-splitter:hover, .dock-splitter:active {
  background: var(--accent-primary, #4d9bec);
}

/* Inner wrapper: holds original content when a panel is split.
   height:100% needed so children with height:100% or calc() can resolve. */
.dock-inner-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

/* Ensure ALL litetabs inside any dock context fill their panel.
   Covers: original tabs inside inner-wrap, derived tab groups,
   and any litetabs inside a dock-leaf class container. */
.dock-inner-wrap .litetabs,
.dock-derived-leaf .litetabs,
.dock-leaf .litetabs {
  flex: 1;
  display: flex !important;
  flex-direction: column;
  min-height: 0;
}
.dock-inner-wrap .litetabs > .wtabcontent,
.dock-derived-leaf .litetabs > .wtabcontent,
.dock-leaf .litetabs > .wtabcontent,
.dock-tabs-fill > .wtabcontent {
  display: block;
  flex: 1;
  overflow: auto;
  min-height: 0;
}

/* Derived leaf containers */
.dock-derived-leaf {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* ---- Docked Toolbox Panels ---- */
.docked-toolbox button {
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: none !important;
  padding: 4px !important;
  cursor: pointer;
  min-width: 28px;
  min-height: 28px;
}
.docked-toolbox button:hover {
  background: var(--btn-bg-hover) !important;
}
.docked-toolbox .sidebar-controls {
  display: flex;
  background: transparent;
  gap: 1px;
  padding: 1px;
}

/* ---- Global transitions ---- */
button,
input,
select,
textarea {
  transition: all var(--transition-fast);
}

/* ---- Focus rings ---- */
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

/* ================================================
   Theme Selector UI (inside Settings tab)
   ================================================ */
.theme-selector {
  padding: 12px 16px;
}

.theme-selector-title {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-primary);
}

.theme-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.theme-card {
  border: 2px solid var(--border-secondary);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-normal);
  background: var(--surface-2);
}

.theme-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.theme-card.active {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px var(--accent-primary), var(--shadow-md);
}

.theme-card-preview {
  height: 60px;
  display: flex;
  gap: 2px;
  padding: 6px;
  overflow: hidden;
  position: relative;
}

/* Mini theme previews using actual theme colors */
.theme-card-preview[data-theme="dark"] {
  background: #131318;
}
.theme-card-preview[data-theme="dark"] .preview-toolbar { background: #2e2e3e; }
.theme-card-preview[data-theme="dark"] .preview-sidebar { background: #1a1a22; }
.theme-card-preview[data-theme="dark"] .preview-canvas { background: #22222e; }

.theme-card-preview[data-theme="light"] {
  background: #f0f0f5;
}
.theme-card-preview[data-theme="light"] .preview-toolbar { background: #d0d0dc; }
.theme-card-preview[data-theme="light"] .preview-sidebar { background: #ebebf0; }
.theme-card-preview[data-theme="light"] .preview-canvas { background: #ffffff; }

.theme-card-preview[data-theme="midnight"] {
  background: #0d1520;
}
.theme-card-preview[data-theme="midnight"] .preview-toolbar { background: #1a2d40; }
.theme-card-preview[data-theme="midnight"] .preview-sidebar { background: #111d2e; }
.theme-card-preview[data-theme="midnight"] .preview-canvas { background: #162536; }

.theme-card-preview[data-theme="forest"] {
  background: #0e1810;
}
.theme-card-preview[data-theme="forest"] .preview-toolbar { background: #1a2820; }
.theme-card-preview[data-theme="forest"] .preview-sidebar { background: #142018; }
.theme-card-preview[data-theme="forest"] .preview-canvas { background: #1a2820; }

.preview-bar {
  border-radius: 3px;
}
.preview-toolbar {
  width: 100%;
  height: 8px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0;
}
.preview-sidebar {
  width: 30%;
  height: 100%;
}
.preview-canvas {
  flex: 1;
  height: 100%;
}

.theme-card-label {
  padding: 6px 8px;
  font-size: 0.85em;
  color: var(--text-secondary);
  text-align: center;
  background: var(--surface-1);
}

.theme-card.active .theme-card-label {
  color: var(--accent-primary);
  font-weight: 600;
}

/* ============================================
   Camera Controls - Rulers
   ============================================ */
#scene_canvas_wrap {
  position: relative !important;
  overflow: hidden !important;
}
#scene_canvas_wrap #field {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
#ruler-h, #ruler-v {
  image-rendering: pixelated;
}
/* Transform mode / toolbar buttons - high specificity to override sidebar-controls */
#scene_toolbar button,
button.transform-mode-btn,
.sidebar-controls button.transform-mode-btn,
.sidebar-controls > button.transform-mode-btn {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  padding: 4px 7px !important;
  font-size: 13px;
  border-radius: 3px;
  color: var(--text-secondary, rgba(255,255,255,0.5));
  flex: none !important;
}
#scene_toolbar button:hover,
button.transform-mode-btn:hover,
.sidebar-controls button.transform-mode-btn:hover {
  color: var(--text-primary, #fff);
  background: var(--hover-bg, rgba(128,128,128,0.15)) !important;
}
#scene_toolbar button.active,
button.transform-mode-btn.active,
.sidebar-controls button.transform-mode-btn.active {
  color: var(--accent-primary, #4d9bec);
  background: rgba(77,155,236,0.15) !important;
}
#scene_toolbar button.toggle-active {
  color: var(--accent-primary, #4d9bec) !important;
  background: rgba(77,155,236,0.15) !important;
}

/* Toggle button active state */
.toggle-active {
  background: var(--accent-primary, #4d9bec) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

.toolbar-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border-primary, rgba(255,255,255,0.12));
  margin: 0 4px;
  vertical-align: middle;
}
#ruler-corner {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-secondary, #888);
  border-right: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* ============================================ */
/* COMPONENT SYSTEM                             */
/* ============================================ */

/* Component folder header bar */
.component-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  height: 22px;
  cursor: pointer;
  user-select: none;
}
.component-header .comp-drag {
  cursor: grab;
  color: var(--text-secondary, #666);
  font-size: 11px;
  padding: 0 2px;
  opacity: 0.6;
}
.component-header .comp-drag:hover { opacity: 1; }
.component-header .comp-drag:active { cursor: grabbing; }
/* Toggle switch for component enable/disable */
.comp-toggle {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}
.comp-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.comp-toggle-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border-color, #555);
  border-radius: 7px;
  transition: background 0.2s;
}
.comp-toggle-slider::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  left: 2px;
  bottom: 2px;
  background: var(--text-secondary, #aaa);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.comp-toggle input:checked + .comp-toggle-slider {
  background: var(--accent-color, #4a90d9);
}
.comp-toggle input:checked + .comp-toggle-slider::before {
  transform: translateX(12px);
  background: #fff;
}
.component-header .comp-name {
  flex: 1;
  font-size: 11px;
  font-weight: bold;
  color: var(--text-primary, #ddd);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.component-header .comp-delete {
  color: var(--text-secondary, #888);
  font-size: 12px;
  cursor: pointer;
  padding: 0 3px;
  border: none;
  background: none;
  opacity: 0.5;
  line-height: 1;
}
.component-header .comp-delete:hover { opacity: 1; color: #e55; }

/* Disabled component dimming */
.component-disabled .dg .cr,
.component-disabled .dg .c {
  opacity: 0.35;
  pointer-events: none;
}
.component-disabled .component-header .comp-name {
  opacity: 0.5;
}

/* Drag placeholder */
.component-drag-placeholder {
  height: 3px;
  background: var(--accent-color, #4a90d9);
  margin: 0;
  border-radius: 2px;
  transition: opacity 0.1s;
}

/* Add Component button */
.add-component-btn {
  display: block;
  width: calc(100% - 12px);
  margin: 8px 6px;
  padding: 6px 0;
  background: var(--panel-bg, #333);
  color: var(--text-primary, #ddd);
  border: 1px dashed var(--border-color, #555);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.add-component-btn:hover {
  background: var(--hover-bg, #444);
  border-color: var(--accent-color, #4a90d9);
}

/* Component picker dropdown */
.component-picker {
  position: absolute;
  bottom: 40px;
  left: 6px;
  right: 6px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--panel-bg, #2a2a2a);
  border: 1px solid var(--border-color, #555);
  border-radius: 6px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.4);
  z-index: 999;
  padding: 6px 0;
}
.component-picker-search {
  display: block;
  width: calc(100% - 16px);
  margin: 4px 8px 6px;
  padding: 5px 8px;
  background: var(--input-bg, #1a1a1a);
  color: var(--text-primary, #ddd);
  border: 1px solid var(--border-color, #444);
  border-radius: 4px;
  font-size: 12px;
  outline: none;
}
.component-picker-search:focus {
  border-color: var(--accent-color, #4a90d9);
}
.component-picker-category {
  padding: 4px 10px 2px;
  font-size: 10px;
  font-weight: bold;
  color: var(--text-secondary, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.component-picker-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-primary, #ddd);
  transition: background 0.1s;
}
.component-picker-item:hover {
  background: var(--hover-bg, #3a3a3a);
}
.component-picker-item.disabled {
  opacity: 0.35;
  pointer-events: none;
}
.component-picker-item .comp-pick-desc {
  font-size: 10px;
  color: var(--text-secondary, #888);
  margin-left: auto;
}
.component-picker-item .comp-pick-warn {
  color: #e8a030;
  font-size: 11px;
  margin-left: 4px;
}

/* ============================================ */
/* PROJECT NAME DISPLAY + SAVE ANIMATION        */
/* ============================================ */
.project-name-display {
  font-size: 12px;
  color: var(--text-secondary, #888);
  padding: 0 8px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 28px;
  user-select: none;
}
#file-save-button.save-flash {
  animation: saveFlash 0.6s ease-out;
}
@keyframes saveFlash {
  0% { background: var(--accent, #4a90d9); color: #fff; }
  100% { background: inherit; color: inherit; }
}

/* ============================================ */
/* CUSTOM CONFIRM DIALOG                        */
/* ============================================ */
.zica-dialog-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55);
  z-index: 90000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dialogFadeIn 0.15s ease-out;
}
@keyframes dialogFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.zica-dialog {
  background: var(--panel-bg, #1e1e2e);
  border: 1px solid var(--border-color, #333);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  min-width: 340px;
  max-width: 480px;
  animation: dialogSlideIn 0.2s ease-out;
  overflow: hidden;
}
@keyframes dialogSlideIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.zica-dialog-header {
  padding: 16px 20px 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #ddd);
}
.zica-dialog-body {
  padding: 0 20px 16px;
  font-size: 13px;
  color: var(--text-secondary, #999);
  line-height: 1.5;
}
.zica-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 20px 16px;
}
.zica-dialog-btn {
  padding: 7px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.15s;
}
.zica-dialog-btn.cancel {
  background: var(--surface-3, #2a2a3e);
  color: var(--text-secondary, #999);
}
.zica-dialog-btn.cancel:hover { background: var(--hover-bg, #333); }
.zica-dialog-btn.danger {
  background: #c0392b;
  color: #fff;
}
.zica-dialog-btn.danger:hover { background: #e74c3c; }
.zica-dialog-btn.primary {
  background: var(--accent, #4a90d9);
  color: #fff;
}
.zica-dialog-btn.primary:hover { background: #5ba0e9; }
.zica-dialog-btn.secondary {
  background: transparent;
  color: var(--text-secondary, #999);
  border: 1px solid var(--border-color, #444);
}
.zica-dialog-btn.secondary:hover { background: var(--hover-bg, #333); }
.zica-dialog-btn:focus-visible {
  outline: 2px solid var(--accent-primary, #4d9bec);
  outline-offset: 2px;
}
/* Closing animations */
.zica-dialog-overlay.zica-dialog-closing {
  animation: dialogFadeOut 0.15s ease-in forwards;
}
.zica-dialog.zica-dialog-closing {
  animation: dialogSlideOut 0.15s ease-in forwards;
}
@keyframes dialogFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes dialogSlideOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-8px) scale(0.97); }
}
/* Dialog input field */
.zica-dialog-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--input-bg, #1a1a2a);
  color: var(--input-text, #eee);
  border: 1px solid var(--input-border, #444);
  border-radius: 6px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
.zica-dialog-input:focus {
  border-color: var(--accent-primary, #4d9bec);
}

/* ============================================ */
/* WORKSPACE DIALOG                             */
/* ============================================ */
.workspace-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 80000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dialogFadeIn 0.15s ease-out;
}
.workspace-dialog {
  background: var(--panel-bg, #1e1e2e);
  border: 1px solid var(--border-color, #333);
  border-radius: 12px;
  box-shadow: 0 16px 60px rgba(0,0,0,0.6);
  width: 700px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  animation: dialogSlideIn 0.2s ease-out;
}
.workspace-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #333);
  gap: 12px;
}
.workspace-header h2 {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #ddd);
  margin: 0;
}
.workspace-header .ws-close {
  background: none;
  border: none;
  color: var(--text-secondary, #888);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.workspace-header .ws-close:hover { color: #e55; background: rgba(255,0,0,0.1); }
.workspace-toolbar {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  gap: 8px;
  border-bottom: 1px solid var(--border-color, #2a2a2a);
}
.workspace-toolbar input[type="text"] {
  flex: 1;
  padding: 6px 10px;
  background: var(--input-bg, #111);
  color: var(--text-primary, #ddd);
  border: 1px solid var(--border-color, #444);
  border-radius: 5px;
  font-size: 12px;
  outline: none;
}
.workspace-toolbar input[type="text"]:focus {
  border-color: var(--accent, #4a90d9);
}
.workspace-toolbar .ws-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}
.workspace-toolbar .ws-btn.primary {
  background: var(--accent, #4a90d9);
  color: #fff;
}
.workspace-toolbar .ws-btn.secondary {
  background: var(--surface-3, #2a2a3e);
  color: var(--text-primary, #ddd);
}
.workspace-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  align-content: start;
}
.workspace-grid:empty::after {
  content: 'No projects yet. Create a new project to get started.';
  grid-column: 1/-1;
  text-align: center;
  color: var(--text-secondary, #888);
  font-size: 13px;
  padding: 40px 0;
}
.ws-project-card {
  background: var(--surface-2, #1a1a28);
  border: 1px solid var(--border-color, #2a2a3e);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 190px;
}
.ws-project-card:hover {
  border-color: var(--accent, #4a90d9);
  transform: translateY(-2px);
}
.ws-project-card.active {
  border-color: var(--accent, #4a90d9);
  box-shadow: 0 0 0 1px var(--accent, #4a90d9);
}
.ws-project-thumb {
  width: 100%;
  min-height: 110px;
  flex-shrink: 0;
  background: #111;
  background-size: cover;
  background-position: center;
}
.ws-project-info {
  padding: 8px 10px;
}
.ws-project-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #ddd);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-project-date {
  font-size: 10px;
  color: var(--text-secondary, #888);
}
.ws-project-actions {
  display: flex;
  gap: 2px;
  padding: 6px 10px 8px;
  margin-top: auto;
  flex-shrink: 0;
  border-top: 1px solid var(--border-color, #2a2a3e);
}
.ws-project-actions button {
  background: var(--surface-3, #252538);
  border: 1px solid var(--border-color, #333);
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  flex: 1;
  text-align: center;
}
.ws-project-actions button:hover {
  background: var(--hover-bg, #444);
  color: var(--text-primary, #fff);
  border-color: var(--accent, #4a90d9);
}

/* ============================================ */
/* TOAST NOTIFICATION                           */
/* ============================================ */
.zica-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 20px;
  background: var(--accent, #4a90d9);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  z-index: 99000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  animation: toastIn 0.3s ease-out;
  pointer-events: none;
}
.zica-toast.fade-out {
  animation: toastOut 0.3s ease-in forwards;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; }
  to { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* ============================================ */
/* VERSION CONTROL TAB                          */
/* ============================================ */
.vc-container {
  padding: 16px 20px;
  max-width: 700px;
  margin: 0 auto;
  color: var(--text-primary, #ddd);
}
.vc-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.vc-toolbar button {
  padding: 6px 14px;
  border: 1px solid var(--border-color, #444);
  border-radius: 5px;
  background: var(--surface-2, #1a1a28);
  color: var(--text-primary, #ddd);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s;
}
.vc-toolbar button:hover { background: var(--hover-bg, #333); }
.vc-toolbar button.primary {
  background: var(--accent, #4a90d9);
  color: #fff;
  border-color: var(--accent, #4a90d9);
}
.vc-branch-badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--surface-3, #2a2a3e);
  border-radius: 12px;
  font-size: 11px;
  color: var(--accent, #4a90d9);
  margin-left: auto;
}
.vc-commit-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.vc-commit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2, #1a1a28);
  border-radius: 6px;
  transition: background 0.1s;
  cursor: pointer;
}
.vc-commit:hover { background: var(--hover-bg, #252530); }
.vc-commit.current { border-left: 3px solid var(--accent, #4a90d9); }
.vc-commit-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent, #4a90d9);
  flex-shrink: 0;
  margin-top: 4px;
}
.vc-commit-info { flex: 1; }
.vc-commit-msg {
  font-size: 13px;
  color: var(--text-primary, #ddd);
  margin-bottom: 3px;
}
.vc-commit-meta {
  font-size: 10px;
  color: var(--text-secondary, #888);
}
.vc-commit-hash {
  font-family: monospace;
  font-size: 10px;
  color: var(--text-secondary, #666);
  background: var(--surface-3, #2a2a3e);
  padding: 1px 5px;
  border-radius: 3px;
}
.vc-commit-actions button {
  background: none;
  border: none;
  color: var(--text-secondary, #888);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
}
.vc-commit-actions button:hover { color: var(--accent, #4a90d9); }
.vc-empty {
  text-align: center;
  color: var(--text-secondary, #888);
  padding: 40px 0;
  font-size: 13px;
}
.vc-diff {
  margin-top: 12px;
  background: var(--surface-2, #1a1a28);
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
}
.vc-diff-add { color: #2ecc71; }
.vc-diff-remove { color: #e74c3c; }
.vc-diff-modify { color: #f39c12; }

/* ============================================ */
/* ASSET MANAGER                                */
/* ============================================ */
.am-container {
  display: flex;
  height: 100%;
  background: var(--panel-bg, #1e1e2e);
  color: var(--text-primary, #ddd);
  font-size: 12px;
  overflow: hidden;
}

/* Folder Tree (left panel) */
.am-tree {
  width: 160px;
  min-width: 120px;
  border-right: 1px solid var(--border-color, #333);
  overflow-y: auto;
  padding: 6px 0;
  flex-shrink: 0;
}
.am-tree-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.1s;
}
.am-tree-item:hover { background: var(--hover-bg, #2a2a3e); }
.am-tree-item.active {
  background: var(--accent, #4a90d9);
  color: #fff;
}
.am-tree-item .am-tree-arrow {
  width: 12px;
  font-size: 8px;
  text-align: center;
  color: var(--text-secondary, #888);
  transition: transform 0.15s;
}
.am-tree-item .am-tree-arrow.expanded { transform: rotate(90deg); }
.am-tree-item .am-tree-icon {
  font-size: 12px;
  color: var(--accent, #4a90d9);
}
.am-tree-item .am-tree-name {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.am-tree-children {
  padding-left: 12px;
}
.am-tree-children.collapsed { display: none; }
.am-tree-item.drop-target {
  outline: 2px dashed var(--accent, #4a90d9);
  outline-offset: -2px;
}

/* Right panel */
.am-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Toolbar */
.am-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-color, #333);
  flex-shrink: 0;
}
.am-breadcrumb {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  overflow: hidden;
  font-size: 11px;
}
.am-breadcrumb span {
  color: var(--text-secondary, #888);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  white-space: nowrap;
}
.am-breadcrumb span:hover { background: var(--hover-bg, #333); color: var(--text-primary, #ddd); }
.am-breadcrumb span:last-child { color: var(--text-primary, #ddd); font-weight: 500; }
.am-breadcrumb .am-bc-sep { color: var(--text-secondary, #555); cursor: default; padding: 0 1px; }
.am-breadcrumb .am-bc-sep:hover { background: none; }
.am-search {
  width: 120px;
  padding: 4px 8px;
  background: var(--input-bg, #111);
  color: var(--text-primary, #ddd);
  border: 1px solid var(--border-color, #444);
  border-radius: 4px;
  font-size: 11px;
  outline: none;
}
.am-search:focus { border-color: var(--accent, #4a90d9); }
.am-toolbar button {
  background: none;
  border: 1px solid var(--border-color, #444);
  color: var(--text-primary, #ddd);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
}
.am-toolbar button:hover { background: var(--hover-bg, #333); }
.am-toolbar button.active { background: var(--accent, #4a90d9); color: #fff; border-color: var(--accent, #4a90d9); }

/* File Grid */
.am-file-grid {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  align-content: start;
}
.am-file-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
  position: relative;
}
.am-file-card:hover { background: var(--hover-bg, #2a2a3e); }
.am-file-card.selected { background: rgba(74, 144, 217, 0.2); outline: 1px solid var(--accent, #4a90d9); }
.am-file-card.drag-over { outline: 2px dashed var(--accent, #4a90d9); }
.am-file-thumb {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  background: var(--surface-2, #151520);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 4px;
}
.am-file-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.am-file-thumb .am-file-icon {
  font-size: 24px;
  color: var(--text-secondary, #666);
}
.am-file-name {
  font-size: 10px;
  text-align: center;
  color: var(--text-primary, #ddd);
  word-break: break-all;
  max-height: 26px;
  overflow: hidden;
  line-height: 13px;
  width: 100%;
}
.am-file-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0,0,0,0.5);
  color: #aaa;
  text-transform: uppercase;
}

/* File List */
.am-file-list {
  flex: 1;
  overflow-y: auto;
}
.am-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid var(--border-color, #1a1a1a);
  user-select: none;
}
.am-file-row:hover { background: var(--hover-bg, #2a2a3e); }
.am-file-row.selected { background: rgba(74, 144, 217, 0.15); }
.am-file-row .am-row-icon {
  width: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary, #888);
}
.am-file-row .am-row-name { flex: 1; font-size: 12px; }
.am-file-row .am-row-type {
  font-size: 10px;
  color: var(--text-secondary, #888);
  width: 50px;
}
.am-file-row .am-row-size {
  font-size: 10px;
  color: var(--text-secondary, #888);
  width: 50px;
  text-align: right;
}

/* Context Menu */
.am-context-menu {
  position: fixed;
  background: var(--panel-bg, #1e1e2e);
  border: 1px solid var(--border-color, #444);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  z-index: 95000;
  padding: 4px 0;
  min-width: 140px;
}
.am-context-item {
  padding: 6px 14px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-primary, #ddd);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.1s;
}
.am-context-item:hover { background: var(--hover-bg, #333); }
.am-context-item.danger { color: #e55; }
.am-context-item.danger:hover { background: rgba(255,50,50,0.1); }
.am-context-sep {
  height: 1px;
  background: var(--border-color, #333);
  margin: 3px 0;
}

/* Empty state */
.am-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary, #666);
  font-size: 13px;
  gap: 8px;
}
.am-empty i { font-size: 32px; opacity: 0.3; }

/* Drop zone overlay */
.am-drop-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(74, 144, 217, 0.1);
  border: 2px dashed var(--accent, #4a90d9);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--accent, #4a90d9);
  z-index: 10;
  pointer-events: none;
}

/* ── Code/Text Editor Toolbar ───────────────────────────────── */
.code-tb-btn {
  padding: 3px 8px;
  background: var(--surface-3, #333);
  color: var(--text-primary, #ddd);
  border: 1px solid var(--border-color, #555);
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.code-tb-btn:hover {
  background: var(--surface-hover, #444);
  color: var(--text-bright, #fff);
}
.code-tb-btn.active {
  background: var(--accent, #4a90d9);
  color: #fff;
}

/* ── dat.GUI select dropdowns follow theme ─────────────────── */
.dg select {
  background: var(--surface-3, #333) !important;
  color: var(--text-primary, #ddd) !important;
  border: 1px solid var(--border-color, #555) !important;
  border-radius: 3px !important;
  padding: 2px 4px !important;
  font-size: 11px !important;
}
.dg select option {
  background: var(--surface-2, #252530) !important;
  color: var(--text-primary, #ddd) !important;
  border-color: var(--accent, #4a90d9);
}
.code-toolbar select,
#EventEditor select {
  padding: 3px 6px;
  background: var(--surface-3, #333);
  color: var(--text-primary, #ddd);
  border: 1px solid var(--border-color, #555);
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
}
.code-toolbar select option,
#EventEditor select option {
  background: var(--surface-2, #252530);
  color: var(--text-primary, #ddd);
}
.code-toolbar select optgroup,
#EventEditor select optgroup {
  background: var(--surface-1, #1a1a2e);
  color: var(--accent, #4a90d9);
  font-weight: bold;
  font-style: normal;
  font-size: 11px;
  padding: 4px 0;
}

/* ── ZICA Console ───────────────────────────────────────────── */
.zc-console {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface-1, #1a1a2e);
  color: var(--text-primary, #ddd);
  font-family: Consolas, 'Courier New', monospace;
  font-size: 12px;
}
.zc-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--surface-2, #252530);
  border-bottom: 1px solid var(--border-color, #333);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.zc-badge {
  font-size: 9px;
  padding: 0 4px;
  border-radius: 8px;
  margin-left: 2px;
  font-weight: 700;
}
.zc-badge-error { background: #c0392b; color: #fff; }
.zc-badge-warn { background: #e67e22; color: #fff; }
.zc-search {
  width: 120px;
  padding: 3px 6px;
  background: var(--surface-3, #333);
  color: var(--text-primary, #ddd);
  border: 1px solid var(--border-color, #555);
  border-radius: 3px;
  font-size: 11px;
  outline: none;
}
.zc-search:focus { border-color: var(--accent, #4a90d9); }
.zc-preserve {
  font-size: 10px;
  color: var(--text-secondary, #888);
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.zc-output {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 0;
}
.zc-entry {
  display: flex;
  align-items: flex-start;
  padding: 2px 8px;
  border-bottom: 1px solid var(--border-color, #2a2a3e);
  gap: 6px;
  line-height: 1.4;
  word-break: break-word;
}
.zc-entry:hover { background: var(--surface-2, #252530); }
.zc-entry.zc-level-error {
  background: rgba(192, 57, 43, 0.1);
  border-left: 3px solid #e74c3c;
}
.zc-entry.zc-level-warn {
  background: rgba(230, 126, 34, 0.08);
  border-left: 3px solid #e67e22;
}
.zc-entry.zc-level-result {
  border-left: 3px solid var(--accent, #4a90d9);
}
.zc-entry.zc-level-command {
  background: var(--surface-2, #252530);
  border-left: 3px solid var(--text-secondary, #888);
}
.zc-time {
  color: var(--text-secondary, #666);
  font-size: 10px;
  flex-shrink: 0;
  min-width: 70px;
}
.zc-icon { flex-shrink: 0; width: 14px; text-align: center; }
.zc-level-error .zc-icon { color: #e74c3c; }
.zc-level-warn .zc-icon { color: #e67e22; }
.zc-level-info .zc-icon { color: #3498db; }
.zc-level-debug .zc-icon { color: #9b59b6; }
.zc-level-result .zc-icon { color: var(--accent, #4a90d9); }
.zc-source {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  font-weight: 600;
  text-transform: uppercase;
}
.zc-source-editor { background: #2c3e50; color: #ecf0f1; }
.zc-source-game { background: #27ae60; color: #fff; }
.zc-source-console { background: var(--accent, #4a90d9); color: #fff; }
.zc-msg { flex: 1; white-space: pre-wrap; }
.zc-stack {
  margin: 4px 0 2px 90px;
  padding: 4px 8px;
  background: var(--surface-2, #252530);
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-secondary, #888);
  cursor: pointer;
  white-space: pre-wrap;
}
/* Object inspector */
.zc-obj { cursor: pointer; }
.zc-obj-toggle { color: var(--text-secondary, #888); margin-right: 2px; }
.zc-obj-key { color: #e06c75; }
.zc-obj-str { color: #98c379; }
.zc-obj-num { color: #61afef; }
.zc-obj-bool { color: #c678dd; }
.zc-obj-null { color: #666; font-style: italic; }
.zc-obj-fn { color: #888; font-style: italic; }
.zc-obj-children {
  margin-left: 16px;
  border-left: 1px solid var(--border-color, #333);
  padding-left: 8px;
}
/* Input bar */
.zc-input-bar {
  display: flex;
  align-items: flex-start;
  padding: 4px 8px;
  background: var(--surface-2, #252530);
  border-top: 1px solid var(--border-color, #333);
  flex-shrink: 0;
  gap: 4px;
}
.zc-prompt {
  color: var(--accent, #4a90d9);
  font-weight: 700;
  padding-top: 2px;
  flex-shrink: 0;
}
.zc-input {
  flex: 1;
  background: transparent;
  color: var(--text-primary, #ddd);
  border: none;
  outline: none;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 12px;
  resize: none;
  line-height: 1.4;
}

/* ── Prefab Manager ─────────────────────────────────────────── */
.pm-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface-1, #1a1a2e);
  color: var(--text-primary, #ddd);
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  position: relative;
}
.pm-tabs {
  display: flex;
  gap: 0;
  background: var(--surface-2, #252530);
  border-bottom: 1px solid var(--border-color, #333);
  flex-shrink: 0;
}
.pm-tab {
  padding: 6px 16px;
  background: transparent;
  color: var(--text-secondary, #888);
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: color .15s, border-color .15s;
}
.pm-tab:hover { color: var(--text-primary, #ddd); }
.pm-tab.active {
  color: var(--accent, #4a90d9);
  border-bottom-color: var(--accent, #4a90d9);
}
.pm-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--surface-2, #252530);
  border-bottom: 1px solid var(--border-color, #333);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.pm-search {
  width: 140px;
  padding: 3px 6px;
  background: var(--surface-3, #333);
  color: var(--text-primary, #ddd);
  border: 1px solid var(--border-color, #555);
  border-radius: 3px;
  font-size: 11px;
  outline: none;
}
.pm-search:focus { border-color: var(--accent, #4a90d9); }
.pm-sep { width: 1px; height: 18px; background: var(--border-color, #555); margin: 0 4px; }
.pm-badge {
  font-size: 9px;
  padding: 0 4px;
  border-radius: 8px;
  margin-left: 2px;
  font-weight: 700;
  background: var(--surface-3, #444);
  color: var(--text-secondary, #888);
}
.pm-badge-entity { background: #27ae60; color: #fff; }
.pm-badge-scene { background: #2980b9; color: #fff; }
.pm-sort {
  padding: 3px 4px;
  background: var(--surface-3, #333);
  color: var(--text-primary, #ddd);
  border: 1px solid var(--border-color, #555);
  border-radius: 3px;
  font-size: 10px;
  cursor: pointer;
}
.pm-sort option {
  background: var(--surface-2, #252530);
  color: var(--text-primary, #ddd);
}
.pm-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
}
/* Grid view */
.pm-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-card {
  width: 120px;
  background: var(--surface-2, #252530);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  overflow: hidden;
  cursor: grab;
  transition: border-color .15s, box-shadow .15s;
}
.pm-card:hover {
  border-color: var(--accent, #4a90d9);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.pm-card-thumb {
  position: relative;
  width: 120px;
  height: 100px;
  background: var(--surface-3, #333);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-card-thumb canvas {
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
}
.pm-type-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
}
.pm-type-entity { background: #27ae60; color: #fff; }
.pm-type-scene { background: #2980b9; color: #fff; }
.pm-card-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  background: rgba(0,0,0,.6);
  opacity: 0;
  transition: opacity .15s;
}
.pm-card:hover .pm-card-actions { opacity: 1; }
.pm-act-btn {
  padding: 3px 6px;
  background: var(--surface-3, #444);
  color: var(--text-primary, #ddd);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}
.pm-act-btn:hover { background: var(--accent, #4a90d9); color: #fff; }
.pm-act-delete:hover { background: #c0392b; }
.pm-card-info {
  display: flex;
  align-items: center;
  padding: 4px 6px;
  gap: 4px;
}
.pm-card-name {
  flex: 1;
  font-size: 10px;
  color: var(--text-primary, #ddd);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-card-fav, .pm-row-fav {
  cursor: pointer;
  color: var(--text-secondary, #666);
  font-size: 11px;
}
.pm-card-fav.active, .pm-row-fav.active { color: #f1c40f; }
/* List view */
.pm-list { display: flex; flex-direction: column; gap: 2px; }
.pm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--surface-2, #252530);
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  cursor: grab;
}
.pm-row:hover { border-color: var(--accent, #4a90d9); }
.pm-row-thumb { width: 40px; height: 40px; image-rendering: pixelated; flex-shrink: 0; }
.pm-row-name { flex: 1; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-row-date { font-size: 10px; color: var(--text-secondary, #888); flex-shrink: 0; }
/* Empty state */
.pm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px;
  color: var(--text-secondary, #666);
  text-align: center;
}
.pm-empty-hint { font-size: 11px; max-width: 280px; }
/* Marketplace placeholder */
.pm-marketplace-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  text-align: center;
  height: 100%;
}
.pm-marketplace-placeholder h3 {
  color: var(--text-primary, #ddd);
  font-size: 18px;
  margin: 0;
}
.pm-marketplace-placeholder p {
  color: var(--text-secondary, #888);
  margin: 0;
}
.pm-mp-desc { font-size: 12px; max-width: 300px; line-height: 1.5; }
/* Drop overlay */
.pm-drop-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(74, 144, 217, 0.15);
  border: 2px dashed var(--accent, #4a90d9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: var(--accent, #4a90d9);
  z-index: 10;
}
/* Context menu */
.pm-ctx-menu {
  position: fixed;
  background: var(--surface-2, #252530);
  border: 1px solid var(--border-color, #555);
  border-radius: 4px;
  padding: 4px 0;
  z-index: 9999;
  min-width: 140px;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.pm-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-primary, #ddd);
}
.pm-ctx-item:hover { background: var(--accent, #4a90d9); color: #fff; }
.pm-ctx-item i { width: 14px; text-align: center; }
.pm-ctx-sep { height: 1px; background: var(--border-color, #444); margin: 3px 0; }