/* gallery.css -- image viewer, file bar, nav arrows */

/* ── Gallery & file thumbnails (JS-generated) ────────────────────────── */
.nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.12); color: #fff; font-size: 1.375rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.nav-arrow:hover { background: rgba(0,0,0,0.88); }
.nav-arrow:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.file-thumb { display: inline-flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.375rem 0.5rem; border-radius: var(--r); cursor: pointer; border: 1px solid transparent; transition: background 0.15s; }
.file-thumb:hover { background: var(--bg-elevated); }
.file-thumb.active { background: var(--bg-elevated); border-color: rgba(255,255,255,0.12); }
.file-thumb img { width: 2.75rem; height: 2rem; object-fit: cover; border-radius: 0.1875rem; }
.file-thumb span { font-size: 0.6875rem; color: var(--text-faint); max-width: 3.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-thumb.active span { color: var(--text-primary); }