/* ── Editor panel ── */
#editor-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  overflow: hidden; /* container handles scrolling via grid-container */
  min-height: 0; /* allow children to stretch
  */
}

/* editor header removed to eliminate top gap */

#grid-container {
  position: relative;
  line-height: 0;
  user-select: none;
  flex: 1; min-width: 0; min-height: 0;
  display: flex; align-items: flex-start; justify-content: flex-start;
  overflow: hidden; padding: 0; background: #1a1a1a; /* full-height dark bg */
}

/* panning cursor */
#grid-container.panning, #grid-container.panning canvas { cursor: grabbing !important; }

#grid-canvas {
  display: block;
  border: 1px solid #333;
  box-sizing: content-box; /* JS sets the drawing-area size; the border sits outside it */
}

/* ── Preview panel ── */
#preview-panel {
  width: 220px;
  min-width: 180px;
  background: #111;
  border-left: 1px solid #2e2e2e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem 0.9rem;
  gap: 0.8rem;
}

/* inspector tabs */
#inspector-tabs { display:flex; gap:6px; width:100%; align-items: center; }
.tab-btn {
  padding: 0.35rem 0.6rem; cursor: pointer; border-radius:0px;
  background: transparent; color: #999; border:none; border-bottom: 2px solid transparent; font-size:0.82rem;
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: #ccc; }
.tab-btn.active { background:transparent; border-color:#888; border-bottom: 2px solid #888; color:#ddd; }

#inspector-collapse-btn {
  background: #111; border: 1px solid #2e2e2e; color: #888; cursor: pointer;
  padding: 0; width: 24px; height: 32px; display: flex; align-items: center; justify-content: center;
  transition: color 0.15s;
  flex-shrink: 0;
  position: absolute;
  right: calc(220px + var(--dock-right-w, 0px));
  top: 1rem;
  z-index: 14;
  border-radius: 8px 0 0 8px;
  border-right: none;
}
#inspector-collapse-btn:hover { color: #ccc; }
#inspector-collapse-btn svg { width: 14px; height: 14px; }

#inspector-collapse-btn:not(.collapsed) svg {
  transform: none;
}

#inspector-collapse-btn.collapsed {
  right: var(--dock-right-w, 0px);
  border-radius: 8px 0 0 8px;
}

.tab-content { display:none; width:100%; }
.tab-content.active { display:block; }

#preview-panel.collapsed {
  display: none;
}

#preview-panel { overflow-y: auto; }

#preview-panel .panel-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.4;
  align-self: flex-start;
  display: none;
}

.preview-bg.checker {
  background-image:
    linear-gradient(45deg, #333 25%, transparent 25%),
    linear-gradient(-45deg, #333 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #333 75%),
    linear-gradient(-45deg, transparent 75%, #333 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

/* ── Preview widget (floats beside inspector) ── */
#main { position: relative; }

/* same window frame as Layers / tool settings; placed by JS, draggable and dockable */
#preview-widget {
  position: fixed;
  z-index: 16;
  width: 220px;
  background: #161616;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
}
#preview-win-header {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.5rem 0.4rem 0.75rem;
  cursor: grab; user-select: none; touch-action: none;
  border-bottom: 1px solid #2e2e2e;
  border-radius: 8px 8px 0 0;
}
#preview-win-header > svg { color: #e0e0e0; opacity: 0.5; flex-shrink: 0; }
#preview-win-header:hover { background: #1e1e1e; }
#preview-widget.dragging #preview-win-header { cursor: grabbing; }
#preview-body {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.5rem; padding: 0.55rem 0.75rem 0.75rem;
}
#preview-widget.minimized #preview-body { display: none; }
#preview-widget.minimized #preview-win-header { border-bottom: none; border-radius: 8px; }
#preview-widget.minimized .panel-min-btn svg { transform: rotate(180deg); }

/* ── Dock columns (windows snapped to the left/right edge) ── */
.dock {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: #111;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a transparent;
}
.dock.empty { display: none; }
/* narrow rails at the outer edges: where the tools strip docks */
.rail {
  width: 64px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #161616; /* the tools strip's own grey, running the full height */
}
.rail.empty { display: none; }
#rail-left { border-right: 1px solid #2e2e2e; }
#rail-right { border-left: 1px solid #2e2e2e; }
.rail > .docked {
  position: static !important;
  left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
  z-index: auto !important;
}
/* the docked tools strip blends into the rail: no card look (id selector to beat #tools-sidebar's own styles) */
.rail > #tools-sidebar.docked {
  box-shadow: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
.rail > #tools-sidebar.docked #tools-sidebar-header { border-radius: 0; }
#tools-sidebar.dragging { z-index: 1000; }
#dock-left { border-right: 1px solid #2e2e2e; }
#dock-right { border-left: 1px solid #2e2e2e; }
/* a docked window becomes a section of the column */
.dock > .docked {
  position: static !important;
  left: auto !important; top: auto !important;
  width: auto !important; height: auto !important; max-height: none !important;
  min-width: 0 !important;
  z-index: auto !important; /* flex items honour z-index: don't sit above windows being dragged */
  flex-shrink: 0;
  box-shadow: none;
}
/* a window being dragged is always on top */
#layers-panel.dragging, #tool-settings.dragging, #preview-widget.dragging, #palette-panel.dragging, #history-panel.dragging { z-index: 1000; }

/* ── History window ── */
#history-panel {
  position: fixed; z-index: 16; width: 220px;
  background: #161616; border: 1px solid #2e2e2e; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  font-size: 0.78rem;
  display: flex; flex-direction: column;
}
#history-header {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.5rem 0.4rem 0.75rem;
  cursor: grab; user-select: none; touch-action: none;
  border-bottom: 1px solid #2e2e2e; border-radius: 8px 8px 0 0;
}
#history-header > svg { color: #e0e0e0; opacity: 0.5; flex-shrink: 0; }
#history-header:hover { background: #1e1e1e; }
#history-panel.dragging #history-header { cursor: grabbing; }
#history-panel.minimized #history-body { display: none; }
#history-panel.minimized #history-header { border-bottom: none; border-radius: 8px; }
#history-panel.minimized .panel-min-btn svg { transform: rotate(180deg); }
.hist-count { margin-left: auto; font-size: 0.68rem; opacity: 0.45; font-variant-numeric: tabular-nums; }
.hist-count + .panel-min-btn { margin-left: 0; }
#history-list {
  max-height: 260px; overflow-y: auto; padding: 4px;
  scrollbar-width: thin; scrollbar-color: #3a3a3a transparent;
}
.hist-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 5px; border: 1px solid transparent;
  cursor: pointer; user-select: none; white-space: nowrap;
}
.hist-row:hover { background: #1f1f1f; }
.hist-row.current { background: #1a3558; border-color: #4a7fcb; color: #fff; }
.hist-row.future { opacity: 0.4; font-style: italic; } /* undone steps (redo-able until a new edit) */
.hist-row svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.8; }
.hist-label { overflow: hidden; text-overflow: ellipsis; }
#history-actions { display: flex; align-items: center; gap: 4px; padding: 6px 8px 8px; border-top: 1px solid #2a2a2a; }
.hist-limit { margin-left: auto; font-size: 0.64rem; opacity: 0.4; }

/* ── Palette window (same frame as Preview / Layers) ── */
#palette-panel {
  position: fixed; z-index: 16;
  background: #161616; border: 1px solid #2e2e2e; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  font-size: 0.78rem;
  display: flex; flex-direction: column;
}
#palette-header {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.5rem 0.4rem 0.75rem;
  cursor: grab; user-select: none; touch-action: none;
  border-bottom: 1px solid #2e2e2e; border-radius: 8px 8px 0 0;
}
#palette-header > svg { color: #e0e0e0; opacity: 0.5; flex-shrink: 0; }
#palette-header:hover { background: #1e1e1e; }
#palette-panel.dragging #palette-header { cursor: grabbing; }
#palette-panel.minimized #palette-body { display: none; }
#palette-panel.minimized #palette-header { border-bottom: none; border-radius: 8px; }
#palette-panel.minimized .panel-min-btn svg { transform: rotate(180deg); }
#palette-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
/* shade cube */
.pal-cube-row { display: flex; flex-direction: column; align-items: center; gap: 6px; align-self: stretch; padding-top: 4px; }
#pal-cube { flex-shrink: 0; overflow: visible; }
.pal-hex-row { display: flex; align-items: center; gap: 8px; align-self: stretch; }
.pal-fgbg { position: relative; width: 32px; height: 32px; flex-shrink: 0; }
.pal-fgbg .color-sq { width: 20px; height: 20px; cursor: default; }
.pal-fgbg .color-sq:hover { border-color: #d8d8d8; transform: none; }
/* Transparent chip shows when it is the foreground (white ring) or background (black ring) */
#pal-transparent.is-fg { box-shadow: 0 0 0 2px #161616, 0 0 0 4px #fff; }
#pal-transparent.is-bg { outline: 2px solid #000; outline-offset: -2px; }
.pal-fgbg .color-sq.fg { left: 1px; top: 1px; }
.pal-fgbg .color-sq.bg { right: 1px; bottom: 1px; }
#pal-transparent { width: 26px; height: 26px; }
#pal-hex {
  flex: 1; min-width: 0; height: 26px; padding: 0 8px; text-align: center;
  background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 4px;
  color: #e0e0e0; font: inherit; font-size: 0.78rem; font-family: ui-monospace, Consolas, monospace; outline: none;
}
#pal-hex:focus { border-color: #4a7fcb; }
#pal-hex.invalid { border-color: #e5484d; }
.cube-face { stroke: #0e0e0e; stroke-width: 1; stroke-linejoin: round; cursor: pointer; }
/* over a dock: see-through, so the dock and the drop line show beneath it */
.dock-hover { opacity: 0.6; transition: opacity 0.12s; }
.dock > .docked .rz { display: none; }
/* snap preview while dragging a window near an edge */
#dock-preview { position: fixed; z-index: 1001; pointer-events: none; } /* above the dragged window */
#dock-preview.zone { background: #4a7fcb22; border: 2px dashed #4a7fcb; border-radius: 8px; }
#dock-preview.line { height: 3px; background: #4a7fcb; border-radius: 2px; box-shadow: 0 0 8px #4a7fcbaa; }

#preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}

/* preview window rows */
.pv-row { display: flex; align-items: center; gap: 6px; width: 100%; }
.pv-btn { width: 24px; height: 24px; flex-shrink: 0; }
#preview-zoom-label {
  width: 38px; flex-shrink: 0;
  text-align: right;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
  white-space: nowrap;
}
#preview-zoom-slider {
  flex: 1; min-width: 0; width: auto; margin: 0;
  accent-color: #4a7fcb;
  cursor: pointer;
}
.pv-seg { position: relative; display: flex; align-items: center; gap: 4px; margin-left: auto; }

#preview-viewport {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #2e2e2e;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(45deg, #999 25%, transparent 25%),
    linear-gradient(-45deg, #999 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #999 75%),
    linear-gradient(-45deg, transparent 75%, #999 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
  background-color: #bbb;
}
/* solid background: just the artwork on a plain colour */
#preview-viewport.solid { background-image: none; background-color: var(--pv-bg, #161616); }

#preview-canvas { display: block; image-rendering: pixelated; }

#ts-minimize { display: none; }