/* Asset gallery: an overlay panel on the canvas, so it never takes width from the graph. */
.gallery {
  position: absolute; z-index: 4; top: 66px; left: 14px; bottom: 14px;
  width: min(560px, calc(100% - 28px)); display: flex; flex-direction: column; gap: 0;
  background: var(--panel); border: 1px solid var(--region); border-radius: var(--r-l);
  box-shadow: var(--shadow); overflow: hidden;
}
.gallery-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px 16px; }
.gallery-head h2 { font: italic 600 20px/1.2 var(--f-display); flex: 1; }
.gallery-filters { display: grid; gap: 10px; padding: 0 16px 12px; border-bottom: 1px dashed var(--line); }
.gchips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 8px 2px 6px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); cursor: pointer;
}
.chip:hover:not([disabled]) { border-color: var(--muted); }
.chip[disabled] { opacity: .45; cursor: default; }
.chip.on { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); background: var(--sunken); }
.chip-n { font: 600 11px var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.gtoggle { display: flex; align-items: center; gap: 8px; min-height: 32px; font-weight: 600; font-size: 13px; cursor: pointer; }
.gtoggle input { width: 16px; height: 16px; accent-color: var(--focus); }
.gallery > .err, .gallery > .hint { padding: 10px 16px 0; }
.gallery.dropping { outline: 2px dashed var(--focus); outline-offset: -8px; }

/* Upload control: choose or drop a file, review its name, then send it. Progress and the server's
   own refusal text share the errbox style of the rest of the app. */
.gupload { display: grid; gap: 10px; padding: 10px 16px 12px; border-bottom: 1px dashed var(--line); }
.gup-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gup-row .hint { margin: 0; }
.gup-ready { display: grid; gap: 10px; }
.gup-file { margin: 0; font: 600 12.5px var(--f-mono); overflow-wrap: anywhere; }
.gup-name { display: grid; gap: 4px; font-weight: 600; font-size: 12.5px; }
.gup-name small { font-weight: 400; }
.gup-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gup-progress { display: grid; gap: 4px; }
.gup-progress progress { width: 100%; height: 10px; accent-color: var(--focus); }
.gup-progress p { margin: 0; }
.gup-cause { margin: 0; font-weight: 600; }

.grid {
  list-style: none; margin: 0; padding: 12px 16px; overflow-y: auto; min-height: 0; flex: 1 1 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; align-content: start;
}
.gcard {
  position: relative; display: grid; gap: 0; width: 100%; padding: 0; text-align: left; cursor: pointer;
  border: 1px solid var(--card-line); border-radius: var(--r-m); background: var(--card); overflow: hidden;
  transition: border-color .15s, transform .15s var(--ease);
}
.gcard:hover { border-color: var(--focus); }
.gcard:active { transform: translateY(1px); }
.gcard-thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--sunken); overflow: hidden; }
.gcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard-plate { display: grid; place-items: center; gap: 2px; font: 600 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gcard-plate b { font-size: 12px; color: var(--ink); }
.gcard-body { display: grid; gap: 2px; padding: 8px 10px 10px; min-width: 0; }
.gcard-name { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard-meta { display: flex; gap: 6px; font: 10px var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.gbadge {
  position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 99px;
  font: 700 9px var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--ink); color: var(--panel);
}
.gallery-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.gcount { font: 600 12px var(--f-mono); font-variant-numeric: tabular-nums; }
.gskip { flex: 1 1 100%; font-size: 11.5px; }
.gallery-foot .btn { margin-left: auto; }

@media (max-width: 820px) {
  /* The gallery lives inside `.stage`, which is ALREADY inset above the tab bar: `bottom: 0` is the
     tab bar's top edge. Subtracting --tab-h here would leave a strip of canvas (and the zoomer)
     showing under the panel. */
  .gallery { top: 0; left: 0; right: 0; bottom: 0; width: auto; border-radius: 0; border: 0; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); padding-bottom: 16px; }
}