/* ── Floating Layers window ── */
#layers-panel {
  position: fixed;
  z-index: 16;
  width: 200px;
  min-width: 170px;
  max-height: calc(100vh - 16px);
  display: flex;
  flex-direction: column;
  background: #161616;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  font-size: 0.78rem;
}
/* opacity row (top) and actions (bottom) stay put; only the layer list scrolls */
#layers-header, #layers-opacity-row, #layers-actions { flex-shrink: 0; }
#layers-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#layers-panel.minimized { height: auto !important; } /* folded: ignore a resized height */
#layers-panel.minimized .rz { display: none; }
/* resize handles */
.rz { position: absolute; z-index: 3; touch-action: none; }
.rz-e { top: 10px; bottom: 10px; right: -4px; width: 8px; cursor: ew-resize; }
.rz-s { left: 10px; right: 10px; bottom: -4px; height: 8px; cursor: ns-resize; }
.rz-se {
  right: 1px; bottom: 1px; width: 12px; height: 12px; cursor: nwse-resize;
  border-bottom-right-radius: 7px;
  /* small diagonal grip */
  background:
    linear-gradient(135deg, transparent 0 55%, #555 55% 62%, transparent 62% 72%, #555 72% 79%, transparent 79%);
}
.rz-se:hover { background:
    linear-gradient(135deg, transparent 0 55%, #4a7fcb 55% 62%, transparent 62% 72%, #4a7fcb 72% 79%, transparent 79%); }
html.resizing-e, html.resizing-e * { cursor: ew-resize !important; }
html.resizing-s, html.resizing-s * { cursor: ns-resize !important; }
html.resizing-se, html.resizing-se * { cursor: nwse-resize !important; }
#layers-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;
}
#layers-panel.minimized #layers-header { border-radius: 8px; }
#layers-header > svg { color: #e0e0e0; opacity: 0.5; flex-shrink: 0; }
#layers-header:hover { background: #1e1e1e; }
#layers-panel.dragging #layers-header { cursor: grabbing; }
#layers-panel.minimized #layers-body { display: none; }
#layers-panel.minimized #layers-header { border-bottom: none; }
.panel-min-btn {
  margin-left: auto; width: 26px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 6px; color: #bbb; cursor: pointer;
}
.panel-min-btn:hover { background: #383838; color: #e0e0e0; }
.panel-min-btn svg { transition: transform 0.2s; }
#layers-panel.minimized .panel-min-btn svg { transform: rotate(180deg); }
#layers-list { flex: 1 1 auto; min-height: 40px; overflow-y: auto; padding: 4px; }
/* scrollbar blended into the dark window (Firefox/new Chrome use scrollbar-color; older WebKit the pseudo-elements) */
#layers-list { scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
#layers-list::-webkit-scrollbar { width: 8px; }
#layers-list::-webkit-scrollbar-track { background: transparent; }
#layers-list::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 4px; border: 2px solid #161616; }
#layers-list::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
.layer-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 6px; border: 1px solid transparent; cursor: pointer;
}
.layer-row:hover { background: #1f1f1f; }
.layer-row.active { background: #1a3558; border-color: #4a7fcb; }
.layer-eye {
  width: 22px; height: 22px; padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: #bbb; cursor: pointer; border-radius: 4px;
}
.layer-eye:hover { background: #ffffff14; color: #fff; }
.layer-row.hidden-layer .layer-thumb, .layer-row.hidden-layer .layer-name { opacity: 0.4; }
.layer-thumb {
  width: 28px; height: 28px; flex-shrink: 0;
  image-rendering: pixelated;
  border: 1px solid #3a3a3a; border-radius: 3px;
  background-color: #bbb;
  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 0;
}
.layer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-name-input {
  flex: 1; min-width: 0; font: inherit; color: #e0e0e0;
  background: #1e1e1e; border: 1px solid #4a7fcb; border-radius: 4px; padding: 1px 4px; outline: none;
}
#layers-opacity-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px 6px 10px; border-bottom: 1px solid #2a2a2a;
}
.opacity-field {
  position: relative; display: flex; align-items: stretch;
  background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 4px;
}
.opacity-field:focus-within { border-color: #4a7fcb; }
#layers-opacity-input {
  width: 46px; background: transparent; border: none; outline: none;
  color: #e0e0e0; font: inherit; padding: 2px 4px 2px 6px; text-align: right;
}
#layers-opacity-toggle {
  width: 20px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-left: 1px solid #3a3a3a; color: #aaa; cursor: pointer;
}
#layers-opacity-toggle:hover { color: #fff; background: #ffffff10; }
#layers-opacity-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
#layers-opacity-pop {
  position: absolute; top: calc(100% + 4px); right: -1px; z-index: 5;
  width: 150px; padding: 8px 10px;
  background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
#layers-opacity { width: 100%; display: block; accent-color: #4a7fcb; }
/* drag-to-reorder */
#layers-list { position: relative; }
.layer-row { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.layer-row .layer-eye { cursor: pointer; }
.layer-name-input { user-select: text; -webkit-user-select: text; cursor: text; }
html.grabbing-layer, html.grabbing-layer * { cursor: grabbing !important; }
/* neighbours slide to open a gap where the layer will land */
#layers-list.reordering .layer-row { transition: transform 0.16s ease; }
#layers-list .layer-row.lifted { visibility: hidden; } /* its old slot, while the ghost is carried */
/* the layer being carried, lifted out of the list */
.layer-ghost {
  position: fixed; z-index: 1000; pointer-events: none;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 6px; font-size: 0.78rem; color: #e0e0e0;
  background: #1f2c40; border: 1px solid #4a7fcb;
  box-shadow: 0 10px 28px rgba(0,0,0,0.65);
  transform: scale(1.04); transform-origin: center;
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.15s, border-color 0.15s, box-shadow 0.2s;
}
/* over the trash can: squeezes toward the pointer, turning red */
.layer-ghost.to-delete { transform: scale(0.3); opacity: 0.6; background: #3a1d20; border-color: #e5484d; }
.layer-ghost.deleting { transform: scale(0); opacity: 0; }
/* over the + button: a second copy peeks out behind it */
.layer-ghost.to-duplicate {
  /* lifted just above the pointer so the green + button stays visible */
  transform: translateY(var(--lift, -40px)) scale(0.92);
  border-color: #2fbf5a;
  box-shadow: 7px 7px 0 -1px #1f2c40, 7px 7px 0 0 #2fbf5a, 0 10px 28px rgba(0,0,0,0.65);
}
/* drop-target buttons light up while a layer is carried over them */
#layers-actions .ts-icon-btn { transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.15s; }
#layer-del.drop-target { background: #e5484d33; border-color: #e5484d; color: #ff6b6f; transform: scale(1.15); }
#layer-add.drop-target { background: #2fbf5a33; border-color: #2fbf5a; color: #5fe08a; transform: scale(1.15); }
/* where it will land on release */
.layer-drop-line {
  position: fixed; z-index: 1001; /* drawn over the carried ghost so it's always visible */
  height: 2px; margin-top: -1px;
  background: #4a7fcb; border-radius: 2px; pointer-events: none;
  box-shadow: 0 0 6px #4a7fcbaa;
  transition: top 0.16s ease;
}
#layers-actions { display: flex; gap: 4px; padding: 6px 8px 8px; border-top: 1px solid #2a2a2a; }
.ts-chips-3 { grid-template-columns: repeat(3, 1fr); }
.ts-chips-2 { grid-template-columns: repeat(2, 1fr); }
.ts-chips .ts-shape { display: flex; align-items: center; justify-content: center; gap: 4px; }
.ts-shape svg { flex-shrink: 0; }

/* ═══ Mobile layout (phones in portrait). Desktop is unaffected. ═══ */