/* Remix / Upscale source picker (image-source-picker.js). A dialog on desktop, a full-height sheet on phones. */
.isp-overlay { z-index: 320; }
.isp { display: flex; width: min(720px, 96%); height: min(640px, 86vh); flex-direction: column; gap: 14px; overflow: hidden; }
.isp .modal-header { flex: none; }
.isp-filters { display: flex; flex: none; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.isp-filters::-webkit-scrollbar { display: none; }
.isp-filters button { flex: none; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 15px; background: rgba(0, 0, 0, .25); color: var(--ink-dim); font: 700 11px/16px var(--font-body); white-space: nowrap; cursor: pointer; }
.isp-filters button.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-bright); }
.isp-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.isp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.isp-tile { position: relative; display: block; aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .3); cursor: pointer; }
.isp-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.isp-tile:hover:not(:disabled) { border-color: var(--accent); }
.isp-tile.is-busy img { opacity: .4; }
.isp-tile .spinner { position: absolute; inset: 0; margin: auto; }
.isp-tile:disabled:not(.is-busy) { opacity: .6; }
.isp-note { display: flex; justify-content: center; padding: 24px 0; color: var(--ink-dim); font: 400 12px/16px var(--font-body); }
.isp-more { display: block; height: 1px; }
.app[data-theme="light"] .isp-filters button, .app[data-theme="light"] .isp-tile { background: rgba(255, 255, 255, .6); }

@media (max-width: 979px) {
  .isp-overlay { align-items: flex-end; padding: 0; }
  .isp { width: 100%; height: 88dvh; max-height: none; padding: 16px 16px calc(12px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 16px 16px 0 0; background: #07100b; }
  .app[data-theme="light"] .isp { background: #f6faf8; }
  .isp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}