/* Outer scrollable box */
.browser-container {
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg);
  padding: 0.75rem;
  max-height: 300px; 
  overflow-y: auto;  
  overflow-x: hidden;
  margin: 0;
  position: relative;
  top: -20px;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch; 

}


/* Header bar (if you still use .browser-header) */
.browser-header {
  padding: 0.75rem 1rem;
  background: var(--bg-contrast);
  border-bottom: 2px solid var(--border);
}
.browser-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

/* Inner grid of thumbnails */
.browser-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

/* ─── Thumbnails ───────────────────────────────────────────────────────────── */

.browser-grid .thumb {
  background: var(--bg-contrast);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.1s ease;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
}
.browser-grid .thumb:hover {
  transform: scale(1.05);
}

.browser-grid .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}