/* ── Main layout ── */
#main {
  flex: 1;
  display: flex;
  gap: 0;
  overflow: hidden;
  margin-left: 0;
  min-height: 0;
  position: relative;
}

/* position icon toolbar near left border */
#tools-sidebar {
  position: fixed;
  left: 8px;
  top: 104px; /* below the top bar and the options bar */
  z-index: 15;
  padding: 0 0.4rem 0.4rem;
  border-radius: 8px;
}

/* drag handle header for the tools panel */
#tools-sidebar-header {
  align-self: stretch;
  height: 16px;
  margin: 0 -0.4rem 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: #555;
  border-bottom: 1px solid #2e2e2e;
  border-radius: 8px 8px 0 0;
  touch-action: none;
  user-select: none;
}
#tools-sidebar-header:hover { color: #999; background: #1e1e1e; }
#tools-sidebar.dragging #tools-sidebar-header { cursor: grabbing; color: #ccc; }

/* drag handle header for the floating tool settings */
#tool-settings-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: -0.55rem -0.75rem 0.7rem;
  padding: 0.45rem 0.75rem;
  cursor: grab;
  border-bottom: 1px solid #2e2e2e;
  border-radius: 8px 8px 0 0;
  touch-action: none;
  user-select: none;
}
#tool-settings-header svg { color: #e0e0e0; opacity: 0.5; flex-shrink: 0; } /* matches .ts-title */
#tool-settings-header:hover { background: #1e1e1e; }
#tool-settings.dragging #tool-settings-header { cursor: grabbing; }
#tool-settings.dragging #tool-settings-header svg { color: #ccc; }

/* ── Floating per-tool settings ── */
#tool-settings {
  position: fixed;
  z-index: 16;
  width: 248px;
  background: #161616;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  padding: 0.55rem 0.75rem 0.75rem;
  font-size: 0.78rem;
}
.ts-title {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em;
  opacity: 0.5;
}
.ts-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; min-height: 26px; margin-bottom: 0.7rem; }
.ts-label { opacity: 0.7; }
/* all rotation presets on one row, equal widths */
.ts-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 0.7rem; }
.ts-chips .btn { padding: 0.25rem 0; font-size: 0.72rem; text-align: center; }
.ts-divider { height: 1px; background: #2a2a2a; margin: 0 0 0.7rem; }
#tool-settings .ts-reset { width: 100%; font-size: 0.75rem; }
.ts-sub { margin-bottom: 0.35rem; }
.ts-btns { display: flex; gap: 4px; }
.ts-icon-btn {
  width: 28px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 4px;
  color: #bbb; cursor: pointer; padding: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ts-icon-btn:hover { background: #383838; border-color: #555; color: #e0e0e0; }
.ts-icon-btn.active { background: #1a3558; border-color: #4a7fcb; color: #fff; }
.ts-icon-btn:disabled { opacity: 0.35; pointer-events: none; }
#ts-lock .ic-locked { display: none; }
#ts-lock.active .ic-locked { display: block; }
#ts-lock.active .ic-unlocked { display: none; }

/* ── Rotation / mirror indicator on the canvas ── */
/* frame follows the canvas transform; its ▲ tab marks the image's top edge */
#view-marker {
  position: absolute;
  pointer-events: none;
  transform-origin: 0 0;
  outline: 2px dashed #4a7fcb99;
  outline-offset: 3px;
  z-index: 2;
}
#view-marker::before {
  content: '▲';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  color: #4a7fcb;
  font-size: 14px;
  line-height: 1;
}
/* one pill at the top: rotation/mirror info + transient "Reset view" (re-appears on hover) */
#view-badge {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: stretch;
  background: #1a3558ee;
  border: 1px solid #4a7fcb;
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
/* whole pill fades/slides out when it has nothing to show */
#view-badge.off { opacity: 0; transform: translate(-50%, -8px); pointer-events: none; }
/* each part slides open/closed instead of popping */
.vb-part {
  max-width: 220px;
  padding: 4px 12px;
  opacity: 1;
  overflow: hidden;
  transition: max-width 0.35s ease, padding 0.35s ease, opacity 0.3s ease, background 0.15s, border-color 0.35s;
}
.vb-part.collapsed { max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; }
#reset-view {
  background: transparent; border: none; border-left: 1px solid transparent;
  color: #fff; cursor: pointer; font: inherit;
}
#reset-view:hover { background: #4a7fcb55; }
#view-badge.both #reset-view { border-left-color: #4a7fcb88; }

#grid-container { overflow: auto; }