/* ── Reset & Base ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #0f0f11;
  --surface:     #1c1c1e;
  --surface-2:   #2c2c2e;
  --surface-3:   #3a3a3c;
  --border:      #3a3a3c;
  --border-dim:  #2c2c2e;
  --text:        #f2f2f7;
  --text-2:      #8e8e93;
  --text-3:      #636366;
  --accent:      #FF9F0A;
  --accent-dim:  rgba(255, 159, 10, 0.12);
  --accent-glow: rgba(255, 159, 10, 0.25);
  --danger:      #ff453a;
  --yellow:      #ffd60a;
  --radius:      8px;
  --radius-sm:   5px;
  --radius-lg:   12px;
  --font-mono:   ui-monospace, 'SF Mono', 'Fira Code', monospace;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ── Titlebar / Header ────────────────────────────────────────────────────── */

#titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 0 80px; /* 80px left for traffic lights */
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-dim);
  -webkit-app-region: drag;
  flex-shrink: 0;
  /* overflow must stay visible so the Tools dropdown can escape the bar */
}
/* Prevent buttons from shrinking and disappearing; spacer can still flex */
#titlebar > * { flex-shrink: 0; }
#titlebar .spacer { flex: 1; min-width: 8px; }

#titlebar .app-name-btn {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-app-region: no-drag;
}
#titlebar .app-name-btn:hover {
  color: var(--accent);
}

#titlebar .app-subtitle {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
  letter-spacing: 0;
}
#titlebar .app-subtitle a {
  color: var(--text-3);
  text-decoration: none;
  -webkit-app-region: no-drag;
}
#titlebar .app-subtitle a:hover {
  color: var(--accent);
  text-decoration: underline;
}

#titlebar .spacer { flex: 1; }

#titlebar button {
  -webkit-app-region: no-drag;
}

/* ── Palette bar ──────────────────────────────────────────────────────────── */

#palette-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}

#palette-bar .label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
}

.palette-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.palette-btn:hover {
  border-color: var(--text-3);
  color: var(--text);
}

.palette-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.palette-swatch {
  display: flex;
  gap: 2px;
}

.palette-swatch span {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  display: block;
}

/* ── Main body ────────────────────────────────────────────────────────────── */

#main {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Photo grid / solo view panel ─────────────────────────────────────────── */

#grid-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden; /* constrains height so #photo-grid can scroll */
}

/* Grid mode: photo-grid scrolls; solo-view hidden */
#photo-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-content: start; /* don't stretch rows — let aspect-ratio determine height */
  gap: 8px;
}

#photo-grid::-webkit-scrollbar { width: 6px; }
#photo-grid::-webkit-scrollbar-track { background: transparent; }
#photo-grid::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }

/* Solo mode: hide grid, show solo-view */
#solo-view {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
}
#grid-panel.solo-mode #photo-grid { display: none; }
#grid-panel.solo-mode #solo-view  { display: flex; }
#grid-panel.solo-mode .grid-only  { display: none !important; }

/* Solo canvas area */
#solo-canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 16px 56px; /* side room for nav arrows */
  position: relative;
}

#solo-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
  max-height: 100%;
  display: block;
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}

/* Solo nav arrows */
.solo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  width: 36px;
  height: 56px;
  color: var(--text-2);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  z-index: 2;
  flex-shrink: 0;
}
.solo-nav:hover { background: rgba(255,255,255,0.13); color: var(--text); }
#solo-prev { left: 8px; }
#solo-next { right: 8px; }

/* Solo footer — info + transforms */
#solo-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-dim);
  flex-shrink: 0;
  background: var(--surface);
}

#solo-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

#solo-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

#solo-meta {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#solo-transforms {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Bigger, bolder transform buttons in solo footer */
#solo-transforms .transform-btn {
  padding: 6px 0;
  font-size: 18px;
  min-width: 40px;
  width: 40px;
  text-align: center;
  border-color: var(--border);
  color: var(--text-2);
  background: var(--surface-2);
}

/* View mode seg-control in grid header */
.view-seg {
  display: flex;
  gap: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.view-seg .seg-btn {
  padding: 3px 0;
  font-size: 11px;
  font-weight: 600; /* fixed weight — prevents layout shift on active state */
  width: 68px;
  text-align: center;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.view-seg .seg-btn.active {
  background: var(--accent);
  color: #0f0f11;
}
.view-seg .seg-btn:not(.active):hover {
  background: var(--surface-3);
  color: var(--text);
}

.photo-slot {
  position: relative;
  padding-top: 87.5%; /* 7/8 — drives height from column width (128×112 = 8:7) */
  border: 2px solid var(--border-dim);
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  background: var(--surface);
  transition: border-color 0.1s ease, transform 0.1s ease;
}

.photo-slot:hover {
  border-color: var(--border);
  transform: scale(1.04);
}

.photo-slot.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.photo-slot.multi-selected {
  border-color: rgba(255,255,255,0.65);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65);
}

.photo-slot.selected-for-gif {
  border-color: var(--yellow);
  box-shadow: 0 0 0 1px var(--yellow);
}

.photo-slot.empty {
  border-style: dashed;
  cursor: default;
}

.photo-slot canvas {
  position: absolute; /* removed from flow — slot height is driven by aspect-ratio alone */
  inset: 0;
  width: 100%;
  height: 100%;
  /* Bilinear scaling: avoids pixel-shift artifacts when CSS hover scale is applied.
     Thumbnails are small enough that smooth interpolation looks better than
     nearest-neighbour aliasing at the fractional CSS scale. */
  image-rendering: auto;
  display: block;
}

/* Slot number badge */
.photo-slot .slot-num {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 9px;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.3);
  pointer-events: none;
  line-height: 1;
}

.photo-slot.selected .slot-num,
.photo-slot:hover .slot-num { color: rgba(255,255,255,0.6); }

/* Empty slot placeholder */
.empty-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 11px;
}

/* GIF selection — whole slot is the target; show a check badge when selected */
.gif-check { display: none; } /* kept in DOM but hidden; slot click handles it */

/* In GIF mode: show a clickable cursor on non-empty slots */
.gif-mode .photo-slot:not(.empty) { cursor: pointer; }

/* Selected-for-gif state: yellow border + subtle overlay with checkmark */
.photo-slot.selected-for-gif {
  border-color: var(--yellow) !important;
  box-shadow: 0 0 0 1px var(--yellow);
}

.photo-slot.selected-for-gif::after {
  /* content set via attr(data-gif-frame) in the override rule below */
  position: absolute;
  bottom: 4px;
  right: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--yellow);
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
  font-family: var(--font-mono);
}

/* ── Detail panel ─────────────────────────────────────────────────────────── */

#detail-panel {
  width: 35%;
  min-width: 260px;
  max-width: 600px;
  flex-shrink: 0;
  border-left: 1px solid var(--border-dim);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
  padding: 24px;
}

/* Hide empty state + show controls once a file is loaded */
.has-file #detail-empty { display: none; }

#detail-empty .icon {
  font-size: 32px;
  opacity: 0.4;
}

/* ── GIF animated preview (detail panel, GIF mode only) ─────────────────────── */

#gif-preview-wrap {
  display: none;
  flex-direction: column;
  align-items: center;
  background: var(--bg);
  border-bottom: 1px solid var(--border-dim);
  padding: 12px 12px 8px;
  flex-shrink: 0;
}
#gif-preview-wrap.visible { display: flex; }

#gif-preview-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
  max-height: 180px;
  width: auto;
  height: auto;
  display: block;
}

#gif-preview-info {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--font-mono);
  margin-top: 5px;
  letter-spacing: 0.2px;
}

/* ── Export controls ──────────────────────────────────────────────────────── */

#export-controls {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: none;
  flex-direction: column;
  gap: 14px;
}

.has-file #export-controls { display: flex; }

#export-controls::-webkit-scrollbar { width: 4px; }
#export-controls::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 2px; }

.ctrl-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ctrl-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
}

/* ── Collapsible sidebar sections ─────────────────────────────────────────── */

.ctrl-group.collapsible > .ctrl-label,
.ctrl-group.collapsible > .tone-header {
  user-select: none;
}

.section-chevron {
  display: inline-block;
  font-size: 18px;
  color: var(--text-2);
  margin-right: 5px;
  transition: transform 0.15s ease;
  line-height: 1;
  font-weight: bold;
  vertical-align: middle;
}

.ctrl-group.collapsed .section-chevron {
  transform: rotate(-90deg);
}

.ctrl-label {
  cursor: pointer;
  transition: color 0.1s;
}

.ctrl-label:hover {
  text-decoration: underline;
}

.section-body-outer {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.2s ease;
  /* gap: 6px is inherited from .ctrl-group flex — remove it on outer wrapper */
}

.ctrl-group.collapsed > .section-body-outer {
  grid-template-rows: 0fr;
}

.section-body-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.seg-control {
  display: flex;
  gap: 4px;
}

.seg-btn {
  flex: 1;
  padding: 5px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.1s;
}

.seg-btn:hover { border-color: var(--text-3); color: var(--text); }
.seg-btn.active {
  background: var(--surface-2);
  border-color: var(--surface-3);
  color: var(--text);
}

/* (gif-controls removed — controls now live in #gif-toolbar) */

.range-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.range-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.range-val {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-2);
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.12s ease, transform 0.1s ease;
  white-space: nowrap;
}

.btn:hover { opacity: 0.85; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.35; cursor: default; }

.btn-primary {
  background: var(--accent);
  color: #0f0f11;
}

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
}

.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn-full { width: 100%; }

/* ── Empty / Welcome state ────────────────────────────────────────────────── */

#welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
}

#welcome.hidden { display: none; }

#welcome .welcome-icon {
  font-size: 64px;
  line-height: 1;
  filter: grayscale(0.3);
}

#welcome h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

#welcome .welcome-subtitle {
  font-size: 12px;
  color: var(--text-3);
  margin: -6px 0 2px;
}

#welcome p {
  font-size: 13px;
  color: var(--text-2);
  max-width: 280px;
  line-height: 1.5;
}

#welcome .btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Status bar ───────────────────────────────────────────────────────────── */

#statusbar {
  height: 24px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border-top: 1px solid var(--border-dim);
  flex-shrink: 0;
}

#statusbar .status-text {
  font-size: 11px;
  color: var(--text-3);
  flex: 1;
}

#statusbar .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}

#statusbar .status-dot.green { background: var(--accent); }

/* ── Pocket modal ─────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(4px);
}

.modal-overlay.hidden { display: none; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 420px;
  max-width: 90vw;
  overflow: hidden;
}

.modal-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 14px;
  font-weight: 600;
}

.modal-body { padding: 16px 20px; }
.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-dim);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.save-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.1s ease;
}

.save-item:hover { border-color: var(--accent); }
.save-item.selected { border-color: var(--accent); background: var(--accent-dim); }

/* Preview thumbnail — rendered at 128×112, displayed at 64×56 */
.save-preview-wrap {
  flex-shrink: 0;
  width: 64px;
  height: 56px;
  border-radius: 3px;
  overflow: hidden;
  background: #0F380F;
  display: flex;
  align-items: center;
  justify-content: center;
}

.save-preview {
  display: block;
  width: 64px;
  height: 56px;
  image-rendering: pixelated;
}

.save-preview-empty {
  font-size: 18px;
  color: var(--text-3);
  line-height: 1;
}

.save-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.save-item .save-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.save-item .save-path {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Toast ────────────────────────────────────────────────────────────────── */

#toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text);
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
  opacity: 0;
  white-space: nowrap;
  z-index: 200;
}

#toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ── GIF mode toolbar ─────────────────────────────────────────────────────── */

#gif-toolbar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: rgba(255, 214, 10, 0.06);
  border-top: 1px solid rgba(255, 214, 10, 0.15);
  font-size: 12px;
  color: var(--yellow);
  flex-shrink: 0;
}

#gif-toolbar.visible { display: flex; }

#gif-toolbar .spacer { flex: 1; }

.gif-mode-label {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  margin-right: 4px;
}

.gif-toolbar-delay {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.gif-ctrl-label {
  font-size: 11px;
  color: var(--yellow);
  white-space: nowrap;
  opacity: 0.75;
}

#gif-toolbar #gif-delay {
  width: 90px;
  accent-color: var(--yellow);
}

#gif-toolbar #gif-delay-val {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--yellow);
  min-width: 38px;
}

#gif-toolbar #gif-count {
  font-size: 11px;
  color: var(--yellow);
  opacity: 0.75;
  white-space: nowrap;
}

.gif-loop-seg {
  flex-shrink: 0;
}

.gif-loop-seg .seg-btn {
  padding: 3px 8px;
  font-size: 11px;
}
.gif-loop-seg .seg-btn.active {
  background: rgba(255, 214, 10, 0.2);
  border-color: rgba(255, 214, 10, 0.5);
  color: var(--yellow);
}

/* ── Drag & drop overlay ──────────────────────────────────────────────────── */

#drop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 159, 10, 0.08);
  border: 3px dashed var(--accent);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

#drop-overlay.visible { opacity: 1; }

#drop-overlay span {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
}

/* ── Grid header (thumbnail size control) ─────────────────────────────────── */

#grid-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 4px;
  flex-shrink: 0;
}

#grid-header .ctrl-label { margin: 0; }

/* ── Panel resize handle + sidebar collapse tab ───────────────────────────── */

#panel-resize-handle {
  width: 14px;           /* wider to house the collapse tab */
  background: transparent;
  cursor: col-resize;
  flex-shrink: 0;
  transition: background 0.15s ease;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Thin drag-indicator strip down the centre */
#panel-resize-handle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: transparent;
  transition: background 0.15s ease;
  pointer-events: none;
}
#panel-resize-handle:hover::before,
#panel-resize-handle.dragging::before {
  background: var(--accent);
}

/* Sidebar collapse/expand tab — centred on the handle */
#sidebar-collapse-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 48px;
  padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  z-index: 2;
  pointer-events: auto;
}
#sidebar-collapse-btn:hover {
  background: var(--surface-3);
  border-color: var(--accent);
  color: var(--text);
}

/* Collapsed state: sidebar folds to zero — desktop only.
   At ≤1024px the sidebar uses the overlay system; applying width:0 there
   would conflict with sidebar-open and make the overlay invisible. */
@media (min-width: 1025px) {
  #app.sidebar-collapsed #detail-panel {
    width: 0;
    min-width: 0;
    overflow: hidden;
    border-left: none;
  }
}
/* Hide the tab at tablet/mobile — overlay sidebar uses #btn-sidebar-toggle */
@media (max-width: 1024px) {
  #sidebar-collapse-btn { display: none; }
}

/* (detail preview canvas removed — lightbox handles solo view) */

/* ── Scale button pixel sub-labels ────────────────────────────────────────── */

.scale-btn small {
  display: block;
  font-size: 9px;
  opacity: 0.6;
  font-family: var(--font-mono);
  margin-top: 1px;
  line-height: 1;
}

.scale-btn { line-height: 1.2; padding-top: 5px; padding-bottom: 5px; }

/* ── Palette bar separator + action buttons ───────────────────────────────── */

.palette-bar-sep {
  flex: 1;
}

#palette-bar .btn-ghost {
  font-size: 11px;
  padding: 4px 8px;
  color: var(--text-3);
  border-color: var(--border-dim);
}

#palette-bar .btn-ghost:hover { color: var(--text); border-color: var(--border); }

/* Delete button in palette editor */
.btn-danger {
  background: var(--danger);
  color: #fff;
}

/* Palette custom badge */
.palette-btn[data-palette^="custom_"] {
  border-style: dashed;
}

/* ── Scrollbar global ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }

/* ── Palette picker (compact button + popover dropdown) ───────────────────── */

#palette-picker-wrap {
  position: relative;
}

.palette-picker-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  width: 200px;      /* fixed — prevents other bar elements from shifting */
  flex-shrink: 0;
  transition: border-color 0.12s;
}

#palette-picker-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette-picker-btn:hover { border-color: var(--text-3); }
.palette-picker-btn.open  { border-color: var(--accent); }

.palette-picker-chevron {
  margin-left: auto;
  color: var(--text-3);
  font-size: 10px;
  transition: transform 0.15s;
}
.palette-picker-btn.open .palette-picker-chevron { transform: rotate(180deg); }

.palette-picker-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  width: 240px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 380px;
}
.palette-picker-dropdown.hidden { display: none; }

.palette-picker-search-wrap {
  padding: 8px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}

.palette-picker-search-wrap input {
  width: 100%;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  outline: none;
}
.palette-picker-search-wrap input:focus { border-color: var(--accent); }

.palette-picker-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}

.pal-section-header {
  padding: 6px 12px 3px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  pointer-events: none;
}

.pal-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.08s;
}
.pal-item:hover { background: var(--surface-2); }
.pal-item.active { background: var(--accent-dim); }
.pal-item.active .pal-item-name { color: var(--accent); }

.pal-item-name {
  font-size: 12px;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pal-item-credit {
  font-size: 10px;
  color: var(--text-3);
  flex-shrink: 0;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.1s;
}
.pal-item-credit:hover { color: var(--accent); text-decoration: underline; }
.pal-item:hover .pal-item-credit { opacity: 1; }

.pal-item-edit {
  opacity: 0;
  font-size: 10px;
  color: var(--text-3);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.1s;
}
.pal-item:hover .pal-item-edit { opacity: 1; border-color: var(--border); }
.pal-item-edit:hover { color: var(--text); background: var(--surface-3); border-color: var(--border); }

.palette-picker-footer {
  padding: 8px;
  border-top: 1px solid var(--border-dim);
  flex-shrink: 0;
}

/* ── Modal inputs: ensure paste/copy works even with body user-select:none ── */

.modal input[type="text"],
.modal input[type="number"],
.modal input[type="color"] {
  -webkit-user-select: text;
  user-select: text;
}

/* ── Thumbnail size slider ─────────────────────────────────────────────────── */

#thumb-size-slider {
  width: 90px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── GIF frame number (replaces static ✓ with numbered badge via data attr) ── */

.photo-slot.selected-for-gif::after {
  content: attr(data-gif-frame);
}

/* ── Favourite palettes strip ──────────────────────────────────────────────── */

#fav-palettes {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;          /* take all remaining palette-bar space */
  min-width: 0;     /* allow shrinking below content size */
  overflow: hidden; /* clip chips that exceed available width */
}

/* Favourite palette buttons — colour-only chips, no text */
.fav-pal-btn {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 2px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fav-pal-btn:hover { border-color: var(--accent); }
.fav-pal-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Swatch block inside fav button — chunky tall bars */
.fav-pal-swatch {
  display: flex;
  gap: 0;
  border-radius: 2px;
  overflow: hidden;
}
.fav-pal-swatch span {
  width: 11px;
  height: 20px;
  display: block;
}

/* Name hidden — shown as title tooltip only */
.fav-pal-label { display: none; }

/* Wheel navigation arrows flanking the fav strip */
.fav-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 26px;
  padding: 0;
  background: none;
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  color: var(--text-3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s;
}
.fav-nav-btn:hover { color: var(--text); border-color: var(--border); }

/* (fav-pal-star remove overlay removed — fav buttons activate palette only; unfav via dropdown pin) */

/* Star button in picker dropdown */
.pal-item-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0 4px;
  color: var(--text-3);
  opacity: 0;
  transition: color 0.12s, opacity 0.12s;
  flex-shrink: 0;
  margin-left: auto;
}
.pal-item:hover .pal-item-star { opacity: 1; }
.pal-item-star.starred { color: var(--accent); opacity: 1; }
.pal-item-star:hover { color: var(--accent); opacity: 1; }

/* Star button overlaid on palette grid cells */
.pgrid-star {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.55);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s;
  z-index: 2;
}
.pgrid-cell:hover .pgrid-star { opacity: 1; }
.pgrid-star.starred { color: var(--accent); opacity: 1; }
.pgrid-star:hover { color: var(--accent); opacity: 1; }

/* Browse palette grid button */
#btn-palette-grid {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px 3px 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
#btn-palette-grid .pgrid-icon {
  flex-shrink: 0;
  display: block;
  border-radius: 2px;
  overflow: hidden;
}

/* ── Current palette pin (top of picker dropdown) ─────────────────────────── */

#pal-current-pin {
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border-dim);
}

.pal-pin-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 5px;
}

.pal-pin-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-3, var(--surface-2));
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: background 0.1s;
}
.pal-pin-item:hover { background: var(--accent-dim); }

.pal-pin-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pal-pin-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-3);
  padding: 0 2px;
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.12s, transform 0.1s;
}
.pal-pin-star.starred { color: var(--accent); }
.pal-pin-star:hover { color: var(--accent); transform: scale(1.2); }

/* ── Palette visual grid overlay ──────────────────────────────────────────── */

#palette-grid-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 150;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(6px);
  /* Critical: prevent the titlebar -webkit-app-region:drag from
     swallowing clicks in the top portion of this overlay in Electron */
  -webkit-app-region: no-drag;
}
#palette-grid-modal.hidden { display: none; }

#palette-grid-header {
  display: flex;
  align-items: center;
  /* 80px left = macOS traffic lights clearance (hiddenInset titlebar) */
  padding: 10px 16px 10px 80px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
  gap: 10px;
  -webkit-app-region: no-drag;
}

/* All header children must be fully interactive */
#palette-grid-header * {
  -webkit-app-region: no-drag;
  pointer-events: auto;
  -webkit-user-select: auto;
  user-select: auto;
}

#palette-grid-size {
  cursor: pointer;
}

.pgrid-size-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.pgrid-size-wrap span {
  font-size: 11px;
  color: var(--text-3);
}
#palette-grid-size {
  width: 80px;
  accent-color: var(--accent);
  cursor: pointer;
}

#palette-grid-header h3 {
  font-size: 14px;
  font-weight: 600;
}

#palette-grid-search {
  flex: 1;
  max-width: 260px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}
#palette-grid-search:focus { border-color: var(--accent); }

#palette-grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.pgrid-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 5px;
  border: 2px solid transparent;
  transition: border-color 0.1s, background 0.1s;
  position: relative; /* for pgrid-star overlay */
}
.pgrid-cell:hover { background: var(--surface-2); border-color: var(--border); }
.pgrid-cell.active { border-color: var(--accent); background: var(--accent-dim); }

.pgrid-cell canvas {
  width: 100%;
  aspect-ratio: 8/7;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 3px;
  display: block;
}

.pgrid-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.pgrid-cell.active .pgrid-name { color: var(--accent); }

/* Chunky 4-colour swatch strip under each grid entry */
.pgrid-swatches {
  display: flex;
  width: 100%;
  height: 9px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.pgrid-swatches span {
  flex: 1;
  display: block;
}

/* ── Sidebar preview ──────────────────────────────────────────────────────── */

#preview-group {
  margin-top: 0;
  margin-bottom: 4px;
}

/* Pinned / sticky preview */

/* When preview is pinned, remove the container's top padding so the sticky
   element can reach the very top of the scrollable area with no gap. */
#export-controls:has(#preview-group.preview-pinned) {
  padding-top: 0;
}

#preview-group.preview-pinned {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  margin-left: -16px;
  margin-right: -16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-dim);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Active state for pin button */
#preview-pin-btn.active {
  color: var(--accent);
  border-color: var(--accent);
}

#sidebar-preview-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 8/7;
}

#sidebar-preview-canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  border-radius: var(--radius-sm);
  display: block;
}

#sidebar-preview-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-3);
}

/* ── Filter scope toggle ─────────────────────────────────────────────────── */

.filter-scope-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}

.filter-scope-label input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── Border frame picker ───────────────────────────────────────────────────── */

#border-frame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 4px;
  margin-top: 4px;
}

.border-frame-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  color: var(--text-2);
  font-size: 10px;
  min-height: 52px;
  justify-content: center;
}

.border-frame-btn:hover {
  border-color: var(--accent);
  background: var(--surface-3);
}

.border-frame-btn.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-2));
  color: var(--accent);
}


.border-frame-btn img {
  width: 40px;
  height: 36px; /* 160:144 ratio × 40px */
  image-rendering: pixelated;
  display: block;
  background: #000;
  border-radius: 1px;
}

.border-frame-btn span {
  font-size: 9px;
  color: var(--text-3);
  line-height: 1;
}

.border-frame-btn.active span {
  color: var(--accent);
}

/* ── Export filters/effects ───────────────────────────────────────────────── */

.filter-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.filter-btn {
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.1s;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
}
.filter-btn:hover { border-color: var(--text-3); color: var(--text); }
.filter-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  border-width: 2px;
}
.filter-btn.focused {
  border-style: solid;
  border-width: 2px;
}

#filter-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.filter-stack-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 10px;
  cursor: pointer;
}

.filter-stack-chip.focused {
  background: var(--accent);
  color: var(--bg);
}

.filter-stack-rm {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
}

.filter-stack-rm:hover { opacity: 1; }

#filter-focused-label {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--font-mono);
}

/* Video export button */
#btn-export-video {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
}
#btn-export-video:hover { color: var(--text); border-color: var(--text-3); opacity: 1; }

/* ── File-only titlebar controls (hidden until a .sav or project is loaded) ── */
.file-only { display: none !important; }
.has-file .file-only { display: flex !important; }

/* ── GIF frame strip ──────────────────────────────────────────────────────── */

#gif-frame-strip {
  display: none;
  flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--border-dim);
  flex-shrink: 0;
}
#gif-frame-strip.visible { display: flex; }

#gif-frame-list {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  overflow-x: auto;
  min-height: 80px;
  align-items: flex-start;
}

#gif-frame-empty {
  font-size: 11px;
  color: var(--text-3);
  padding: 0 16px 10px;
  text-align: center;
}

/* Individual frame chip */
.gif-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
  cursor: grab;
  flex-shrink: 0;
  width: 76px;
  transition: border-color 0.1s, opacity 0.1s;
  -webkit-app-region: no-drag;
}
.gif-chip:hover      { border-color: var(--border); }
.gif-chip.dragging   { opacity: 0.30; cursor: grabbing; }
.gif-chip.drag-over  { border-color: var(--accent); }

.gif-chip-canvas {
  width: 68px;
  height: 60px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 2px;
  display: block;
  flex-shrink: 0;
}

/* Frame number badge — top-left corner */
.gif-chip-num {
  position: absolute;
  top: -7px;
  left: -7px;
  background: var(--accent);
  color: #0f0f11;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* Per-frame palette swatch button */
.gif-chip-pal {
  width: 100%;
  padding: 0;
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  background: var(--surface-3);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.1s;
  flex-shrink: 0;
}
.gif-chip-pal:hover        { border-color: var(--text-3); }
.gif-chip-pal.overridden   { border-color: var(--accent); }

/* 4-colour swatch strip inside the frame palette button */
.gif-chip-swatch {
  display: flex;
  width: 100%;
  height: 7px;
  border-radius: 0;
  overflow: hidden;
}
.gif-chip-swatch span { flex: 1; display: block; }

/* Remove button — top-right corner */
.gif-chip-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  padding: 0;
}
.gif-chip-remove:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

/* ── Frame palette popover ──────────────────────────────────────────────────── */

.frame-pal-popover {
  position: fixed;
  z-index: 400;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.65);
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}

.frame-pal-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.08s;
}
.frame-pal-opt:hover  { background: var(--surface-2); }
.frame-pal-opt.active { background: var(--accent-dim); color: var(--accent); }

.frame-pal-sep {
  height: 1px;
  background: var(--border-dim);
  margin: 4px 0;
}

.frame-pal-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.frame-pal-swatch {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.frame-pal-swatch span {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  display: block;
}

/* ── GIF chip duplicate button ───────────────────────────────────────────────── */

.gif-chip-dup {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 9px;
  min-width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  padding: 0 4px;
  opacity: 0;
  transition: opacity 0.12s, background 0.1s, color 0.1s;
}
.gif-chip:hover .gif-chip-dup { opacity: 1; }
.gif-chip-dup:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Drop overlay ─────────────────────────────────────────────────────────── */

#drop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 159, 10, 0.08);
  border: 3px dashed var(--accent);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#drop-overlay.hidden { display: none; }

.drop-msg {
  font-size: 22px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.3px;
}

/* ── Photo transform buttons ──────────────────────────────────────────────── */

#photo-transforms {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.transform-btn {
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.1s;
  line-height: 1;
}
.transform-btn:hover { border-color: var(--border); color: var(--text); background: var(--surface-2); }
.transform-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

.transform-sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--border-dim);
  margin: 0 3px;
}

/* ── Hide-empty grid behaviour ────────────────────────────────────────────── */

#photo-grid.hide-empty .photo-slot.empty { display: none; }

#btn-hide-empty.active,
#btn-multiselect.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

#multiselect-count {
  display: none;
  font-size: 11px;
  color: var(--text-3);
}

/* ── Grid header button layout ─────────────────────────────────────────────── */

#grid-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
  /* overflow must stay visible so the Actions dropdown can escape the bar */
}
#grid-header > * { flex-shrink: 0; }
#grid-header .ctrl-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
#grid-header #thumb-size-slider { flex: 1; max-width: 100px; accent-color: var(--accent); cursor: pointer; }

/* ── Fullscreen presentation overlay ─────────────────────────────────────── */

#presentation-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.96);
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
#presentation-overlay.hidden { display: none; }

#pres-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: calc(100vw - 160px);
  max-height: calc(100vh - 120px);
  border-radius: 4px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.8);
}

#pres-label {
  font-size: 13px;
  color: var(--text-2);
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}

#pres-close {
  position: fixed;
  top: 20px;
  right: 20px;
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  color: var(--text-2);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s, color 0.12s;
}
#pres-close:hover { border-color: var(--text); color: var(--text); }

.pres-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  width: 44px;
  height: 64px;
  color: var(--text-2);
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.pres-nav:hover { background: rgba(255,255,255,0.14); color: var(--text); }
#pres-prev { left: 16px; }
#pres-next { right: 16px; }

/* ── Per-filter param rows ────────────────────────────────────────────────── */

.fp-row {
  margin-top: 8px;
}

/* ── Scope toggle (All Photos / This Photo) ───────────────────────────────── */

.scope-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 2px;
}

.scope-seg {
  flex: 1;
}

.scope-seg .seg-btn {
  width: auto;
  flex: 1;
  padding: 4px 0;
  font-size: 11px;
  text-align: center;
}

#btn-scope-reset {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 10px;
  padding: 3px 8px;
  color: var(--text-3);
}
#btn-scope-reset.hidden { display: none !important; }

/* Per-photo override badge — small accent dot bottom-right of thumbnail */
.photo-slot.has-photo-settings::after {
  content: '⊙';
  position: absolute;
  bottom: 3px;
  right: 3px;
  background: var(--accent);
  color: #0f0f11;
  font-size: 8px;
  font-weight: 700;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  line-height: 1;
}

/* ── Tone controls ────────────────────────────────────────────────────────── */

.tone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.btn-xs {
  padding: 2px 7px;
  font-size: 10px;
  border-radius: var(--radius-sm);
}

.tone-section-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 10px;
  margin-bottom: 4px;
}

.tone-color-row {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.tone-color-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tone-color-input {
  display: none; /* hidden — replaced by .color-swatch-btn */
}

.color-swatch-btn {
  width: 48px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.1s;
}
.color-swatch-btn:hover { border-color: var(--accent); }

/* ── Custom color picker panel ──────────────────────────────────────────────── */
.color-picker-panel {
  position: fixed;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  width: 210px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.cp-preview {
  width: 100%;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.cp-slider-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cp-slider-label {
  font-size: 10px;
  color: var(--text-3);
  width: 10px;
  flex-shrink: 0;
  text-align: center;
  font-family: var(--font-mono);
}
.cp-slider-row input[type=range] {
  flex: 1;
  height: 4px;
  accent-color: var(--accent);
}
.cp-slider-val {
  font-size: 10px;
  color: var(--text-3);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
  font-family: var(--font-mono);
}
.cp-hex-input {
  width: 100%;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 11px;
  font-family: var(--font-mono);
  text-align: center;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}
.cp-hex-input:focus { border-color: var(--accent); }

/* Palette editor color swatch (inline, no OS dialog) */
.pal-color-swatch-btn {
  width: 40px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.1s;
}
.pal-color-swatch-btn:hover { border-color: var(--accent); }

#tone-split-detail {
  margin-top: 4px;
}

/* ── Lightbox solo view ────────────────────────────────────────────────────── */

#lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.96);
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -webkit-app-region: no-drag;
}
#lightbox-overlay.hidden { display: none; }

#lb-canvas-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 60px 100px 12px;
}

#lb-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.8);
}

#lb-close {
  position: fixed;
  top: 20px;
  right: 20px;
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  color: var(--text-2);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: border-color 0.12s, color 0.12s;
}
#lb-close:hover { border-color: var(--text); color: var(--text); }

.lb-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  width: 44px;
  height: 64px;
  color: var(--text-2);
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  z-index: 10;
}
.lb-nav:hover { background: rgba(255,255,255,0.14); color: var(--text); }
#lb-prev { left: 16px; }
#lb-next { right: 16px; }

#lb-footer {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 80px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.5);
  border-top: 1px solid rgba(255,255,255,0.07);
}

#lb-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}

#lb-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

#lb-meta {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--font-mono);
}

#lb-transforms {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
}

#lb-export {
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Filter checkbox list ────────────────────────────────────────────────── */

.ctrl-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ctrl-header-actions {
  display: flex;
  gap: 4px;
}

.filter-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 6px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.filter-row:hover {
  background: var(--surface-2);
}
.filter-row-active {
  background: var(--accent-dim);
  border-color: var(--border);
}
.filter-row-focused {
  border-color: var(--accent) !important;
}

.filter-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.filter-name {
  flex: 1;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.filter-row-active .filter-name {
  color: var(--accent);
  font-weight: 500;
}

.filter-settings-btn {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: color 0.1s, background 0.1s;
}
.filter-settings-btn:hover {
  color: var(--text);
  background: var(--surface-3);
}
.filter-row-focused .filter-settings-btn {
  color: var(--accent);
}

/* ── Presets ─────────────────────────────────────────────────────────────── */

.preset-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.preset-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.preset-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.preset-select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 11px;
  padding: 3px 5px;
  cursor: pointer;
  appearance: auto;
}
.preset-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Section headings (Exposure, Split Tone, Effects & Filters) ──────────── */

/* Section headers: label left, checkbox right next to label, action button(s) pushed far right */
.section-header {
  cursor: pointer;
  justify-content: flex-start !important;
  gap: 6px;
}

.section-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex: 1; /* grow to push buttons + checkbox to the right */
  cursor: pointer;
}

/* Section enable/disable checkbox */
.section-check-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}
.section-check {
  width: 13px;
  height: 13px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── Filter accordion (legacy + new fi- items) ───────────────────────────── */

.filter-accordion,
#filter-accordion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  margin-bottom: 8px;
}

/* ── New Lightroom-style fi-item accordion ──────────────────────────────── */

.fi-item {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
}
.fi-item + .fi-item { margin-top: 2px; }

.fi-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 4px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}
.fi-header:hover { background: var(--surface-2); }

.fi-drag-handle {
  font-size: 12px;
  color: var(--text-3);
  flex-shrink: 0;
  cursor: grab;
  transition: color 0.1s;
  line-height: 1;
  margin-right: 4px;
}
.fi-drag-handle:active { cursor: grabbing; }
.fi-header:hover .fi-drag-handle { color: var(--text-2); }
.fi-item.fi-dragging { opacity: 0.5; }
.fi-item.fi-drag-over { background: var(--accent-dim); }

.fi-chevron {
  font-size: 17px;
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s;
  line-height: 1;
}
/* Collapsed = chevron points right; open = points down */
.fi-item:not(.fi-open) .fi-chevron { transform: rotate(-90deg); }
.fi-item.fi-open        .fi-chevron { transform: rotate(0deg); }

.fi-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  flex: 1;
  user-select: none;
  transition: color 0.1s;
}

.fi-check-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  margin-left: auto;
  padding-left: 6px;
}

/* Active state — filter is enabled */
.fi-item.fi-active .fi-label   { color: var(--accent); font-weight: 500; }
.fi-item.fi-active .fi-chevron { color: var(--accent); }
.fi-item.fi-active .fi-header  { background: var(--accent-dim); }

/* Body — collapsed by default; fi-open shows it */
.fi-body-outer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.18s ease;
}
.fi-item.fi-open .fi-body-outer { grid-template-rows: 1fr; }

.fi-body-inner {
  overflow: hidden;
  min-height: 0;
  /* No padding here — padding lives on .fi-body-content so grid collapse works cleanly */
}
/* The actual content wrapper inside the grid child — carries the padding */
.fi-body-content {
  padding: 4px 8px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fi-body-content .range-wrap { margin-top: 0; margin-bottom: 0; }
.fi-body-content .fp-row     { margin-top: 0; }

/* ── Custom orange/black checkboxes ─────────────────────────────────────── */

.section-check-wrap input[type="checkbox"],
.fi-check-wrap      input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  border: 1.5px solid var(--border);
  background: var(--surface-3);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s;
  vertical-align: middle;
}
.section-check-wrap input[type="checkbox"]:hover,
.fi-check-wrap      input[type="checkbox"]:hover {
  border-color: var(--text-3);
}
.section-check-wrap input[type="checkbox"]:checked,
.fi-check-wrap      input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.section-check-wrap input[type="checkbox"]:checked::after,
.fi-check-wrap      input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: 2px solid #000;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* ── Legacy filter-item / filter-btn / filter-inline (kept for compat) ──── */

.filter-item {
  display: flex;
  flex-direction: column;
}

.filter-item .filter-btn {
  width: 100%;
  text-align: left;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 400;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.filter-item .filter-btn:hover { background: var(--surface-2); color: var(--text); }
.filter-item .filter-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}

.filter-inline {
  padding: 8px 8px 8px 10px;
  margin: 2px 0 4px;
  background: var(--surface-2);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.filter-inline .range-wrap { margin-top: 0; margin-bottom: 6px; }
.filter-inline .fp-row + *  { margin-top: 6px; }

/* ── gif-preview-info inside preview wrap ───────────────────────────────── */
#gif-preview-info {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  padding: 3px 0 0;
  font-family: var(--font-mono);
}

/* ── Sidebar overlay backdrop (tablet) ──────────────────────────────────── */
#sidebar-backdrop {
  display: none; /* shown only at ≤1024px when sidebar is open */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

/* Sidebar toggle — hidden on desktop, shown at tablet as a simple arrow */
#btn-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  padding: 4px 10px;
  line-height: 1;
}

/* ── Responsive: Small Laptop (≤1280px) ─────────────────────────────────── */
@media (max-width: 1280px) {
  /* Hide low-priority titlebar buttons; keep Open .sav + Open Pocket.
     Must use !important to beat the .has-file .file-only { display: flex !important } rule. */
  #tb-open-project,
  #tb-save-project,
  #tb-export-sav,
  #tb-reload-sav { display: none !important; }

  /* At 1280px tighten — keep subtitle fully visible */

  /* Tighten the sidebar a touch */
  #detail-panel { width: 300px; }

  /* Copy/Paste settings buttons wrap awkwardly — hide in grid header */
  .btn-copy-effects,
  .btn-paste-effects { display: none; }
}

/* ── Responsive: Tablet (≤1024px) ──────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Titlebar: no traffic-light gap needed; tighten padding */
  #titlebar { padding: 0 12px; gap: 8px; }

  /* On tablet, keep only Open .sav + sidebar toggle */
  #tb-open-pocket { display: none; }

  /* Keep subtitle visible at all widths — version + link never disappear */

  /* Show the sidebar toggle button */
  #btn-sidebar-toggle { display: inline-flex; }

  /* Palette bar: fav strip visibility is now JS-controlled (responsive chip count) */

  /* Resize handle hidden — sidebar is an overlay, not inline */
  #panel-resize-handle { display: none; }

  /* Grid fills full width */
  #grid-panel { flex: 1; width: 100%; }

  /* Tighten grid padding */
  #photo-grid { padding: 10px; gap: 6px; }
  #grid-header { gap: 6px; padding: 6px 10px 4px; }

  /* Contact sheet export button — too wide for condensed header */
  #btn-contact-sheet { display: none; }

  /* Detail panel: slide-in overlay from the right */
  #detail-panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 320px;
    max-width: 88vw;
    flex-shrink: 0;
    z-index: 200;
    transform: translateX(101%); /* start off-screen */
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -6px 0 32px rgba(0,0,0,0.55);
    overflow-y: auto;
  }

  /* Show sidebar when app has .sidebar-open class */
  #app.sidebar-open #detail-panel { transform: translateX(0); }

  /* Backdrop: only shown at this breakpoint */
  #sidebar-backdrop { display: block; }
  #app.sidebar-open #sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Web version: no macOS traffic lights, so drop the 80px left padding */
body.web #titlebar { padding-left: 16px; }

/* ── Overflow / collapse menus ──────────────────────────────────────────────
   Three collapsible menus appear when their parent row runs out of space:
   - #tools-menu-wrap  → titlebar (at ≤1280px, when tool buttons are hidden)
   - #grid-actions-wrap → grid header (detected dynamically via JS)
   - #fav-menu-wrap    → palette bar (at ≤1024px, when fav strip is hidden)
   ────────────────────────────────────────────────────────────────────────── */

.overflow-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.overflow-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  z-index: 600;
  min-width: 190px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  -webkit-app-region: no-drag;
}
.overflow-dropdown.hidden { display: none; }

.overflow-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  -webkit-app-region: no-drag;
}
.overflow-item:hover { background: var(--surface-3); }
.overflow-item:disabled { opacity: 0.38; cursor: default; }
.overflow-item:disabled:hover { background: none; }

/* File-only items inside overflow menus */
.overflow-file-only { display: none; }
.has-file .overflow-file-only { display: flex; }

/* Grid-only items inside overflow menus (hidden in solo mode) */
.overflow-grid-only { display: flex; }
#grid-panel.solo-mode .overflow-grid-only { display: none; }

/* Fav palette swatch inside dropdown */
.overflow-pal-swatch {
  display: inline-flex;
  width: 44px;
  height: 12px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.overflow-pal-swatch span { flex: 1; }

/* ── Overflow button visibility rules ─────────────────────────────────────── */

/* Tools menu: always hidden until ≤1280px */
#btn-tools-menu { display: none; }
@media (max-width: 1280px) {
  #btn-tools-menu { display: inline-flex; }
}

/* Grid actions overflow button — JS adds .overflow-active to #grid-header when items overflow */
#btn-grid-actions { display: none; }
#grid-header.overflow-active #btn-grid-actions { display: inline-flex; }
/* Must beat .has-file .file-only { display:flex !important } specificity (0,2,0).
   Use .has-file prefix so we match specificity and win by source order (later in file). */
#grid-header.overflow-active .grid-action-item,
#grid-header.overflow-active.has-file .grid-action-item,
.has-file #grid-header.overflow-active .grid-action-item { display: none !important; }

/* Fav menu: JS-controlled via setupFavCarouselResponsive(); hidden by default */
#btn-fav-menu { display: none; }