/* Code Lab: My pictures (code-lab-images.js) */
.lab-img-btn { position: relative; }
.lab-img-count {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--accent); color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 17px; text-align: center;
}
.lab-img-count[hidden] { display: none; }
.lab-img-dialog { width: min(560px, calc(100vw - 32px)); }
.lab-img-dialog .lab-dialog-note code, .lab-img-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem;
  background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; color: var(--text);
}
.lab-img-dialog .lab-img-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 14px 0 0; padding: 20px 16px; cursor: pointer; text-align: center;
  border: 2px dashed var(--border); border-radius: 12px; background: var(--code-bg); transition: border-color .15s, background .15s;
}
.lab-img-drop:hover, .lab-img-drop.is-over, .lab-img-drop:focus-within { border-color: var(--accent); }
.lab-img-drop.is-busy { opacity: .65; pointer-events: none; }
.lab-img-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lab-img-drop svg { width: 30px; height: 30px; color: var(--accent); }
.lab-img-drop strong { font-size: 0.95rem; }
.lab-img-dialog .lab-img-drop small { font-weight: 400; font-size: 0.8rem; color: var(--text-muted); }
.lab-img-msg { margin: 10px 0 0; font-size: 0.85rem; color: var(--text-muted); }
.lab-img-msg:empty { display: none; }
.lab-img-msg.is-err { color: #ff8a8a; }
.lab-img-listhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 0; }
.lab-img-listhead[hidden] { display: none; }
.lab-img-total { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
/* One scroller only (founder, 2026-10-06: "it keeps jumping"): the list used to scroll inside the scrolling panel,
   and a scroll past either end carried on into the panel, then the page behind it. Now the panel scrolls, it never
   hands the scroll on, and the page stays still while the panel is open. */
.lab-img-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.lab-img-dialog { overscroll-behavior: contain; }
html:has(.lab-img-dialog[open]) { overflow: hidden; }
html { scrollbar-gutter: stable; } /* no sideways shift when the page's scrollbar hides under the open panel */
/* Rename and the questions asked inside the panel (Remove, Delete all). */
.lab-img-rename { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lab-img-rename-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.lab-img-rename-row input { flex: 1 1 auto; min-width: 0; width: auto; padding: 6px 8px; font: 0.85rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text); background: var(--code-bg); border: 1px solid var(--accent); }
.lab-img-ext { font: 0.85rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-muted); }
.lab-img-rename-err { margin: 0; font-size: 0.8rem; color: #ff8a8a; }
.lab-img-rename-err[hidden] { display: none; }
.lab-img-ask { flex: 1 0 100%; font-size: 0.82rem; color: var(--text); }
.lab-img-listhead .lab-img-ask { flex: 1 1 auto; }
.lab-img-act.is-yes { color: #fff; background: var(--accent); border-color: var(--accent); }
.lab-img-act.is-rm.is-yes { background: #b42318; border-color: #b42318; color: #fff; }
.lab-img-listhead + .lab-img-list { margin-top: 8px; }
.lab-img-listhead { flex-wrap: wrap; }
.lab-img-list:empty { display: none; }
.lab-img-item { display: flex; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 12px; }
.lab-img-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--code-bg); }
.lab-img-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lab-img-name { align-self: flex-start; max-width: 100%; overflow-wrap: anywhere; }
.lab-img-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-img-act {
  font: inherit; font-size: 0.78rem; font-weight: 600; padding: 5px 10px; border-radius: 8px; cursor: pointer;
  color: var(--text); background: transparent; border: 1px solid var(--border);
}
.lab-img-act:hover { border-color: var(--accent); }
.lab-img-act.is-rm { color: var(--text-muted); }
.lab-img-act.is-rm:hover { color: #ff8a8a; border-color: #ff8a8a; }
.lab-img-make { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.lab-img-make .btn-block { margin-top: 10px; }
.lab-img-acts[hidden], .lab-img-name[hidden] { display: none; } /* while renaming */
.lab-img-list { grid-template-columns: minmax(0, 1fr); } /* the rename box never widens the list */
.lab-img-rename-row input { width: 0; }