/* ---- From my assets ----------------------------------------------------------
   One picker for every "add": upload from the computer, or choose something Kynd
   already made or a project already holds. The site's own dialog look; a grid of
   cards that reads at a glance, so choosing a picture is one click. */
dialog.asset-picker { width: min(860px, calc(100% - 32px)); padding: 26px 28px 22px; text-align: left; }
.asset-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.asset-picker-head h2 { margin: 0 0 10px; font-size: 24px; }
.asset-picker-close { background: none; color: #b1b0c2; font-size: 26px; line-height: 1; padding: 0 4px; }
.asset-picker-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 16px; }
.asset-picker-upload span { font-size: 12px; color: var(--muted); }
.asset-picker-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.asset-chip { font-size: 11px; color: #9fa3b9; background: #ffffff06; border: 1px solid #ffffff12; border-radius: 999px; padding: 6px 12px; }
.asset-chip.is-on { color: #e6dcff; background: #c9b6ff1c; border-color: #c9b6ff55; }
.asset-picker-body { display: grid; gap: 18px; }
.asset-picker-body h3 { margin: 0 0 10px; font-size: 9px; letter-spacing: 1.8px; color: #8f94ab; font-weight: 650; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.asset-card { display: flex; flex-direction: column; gap: 6px; padding: 6px; text-align: left; color: inherit;
  background: #171c28; border: 1px solid #ffffff10; border-radius: 12px; min-width: 0; transition: border-color .15s, transform .15s; }
.asset-card:hover { border-color: #c9b6ff55; transform: translateY(-1px); }
.asset-card.is-picked { border-color: var(--lilac); box-shadow: 0 0 0 2px #c9b6ff40; }
.asset-card-media { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px;
  background: radial-gradient(ellipse at 40% 30%, #b395db22, transparent 70%), #10141e; }
.asset-card-media.is-song { font-size: 30px; color: #c9b6ff; }
.asset-card-media.is-loading { animation: asset-shimmer 1.4s ease-in-out infinite alternate; }
@keyframes asset-shimmer { from { opacity: .45; } to { opacity: .9; } }
.asset-card-words { display: grid; gap: 1px; padding: 0 2px 2px; min-width: 0; }
.asset-card-words strong { font-size: 11px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-card-words small { font-size: 9px; color: #858ba1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-picker-empty { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.7; }
.asset-more { margin-top: 10px; }
.asset-picker-note { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: #ffffff08; font-size: 12px; }
.asset-picker-note[role="alert"] { background: rgba(200, 60, 60, .14); }
.asset-picker-foot { display: flex; justify-content: flex-end; margin-top: 16px; }
/* "Upload" and "From my assets", side by side wherever something is added. */
.asset-source-row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 520px) {
  dialog.asset-picker { padding: 20px 16px 16px; }
  .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}