/* Playit — the shared "AI PROMPT" (regenerate) modal skin.
   Shared because BOTH the wizard's ASSETS step and the IDE's ASSETS tab open it (the "make it
   again" sparkle), so it lives here rather than in either page's own stylesheet (the "appears on >1
   page → promote" rule). The class family keeps the .regen-* name it was born with; the IDE's own
   add-asset modal reuses this same skin and adds only its .addasset-* parts. */

/* darker backdrop than the default modal */
.modal-regen { background: rgba(5, 4, 15, .86); }
/* the pink-bordered panel: 560px wide, #100e2c fill, thick pink border + glow */
.regen-card {
  width: 560px;
  max-width: 100%;
  background: #100e2c;
  border: 4px solid var(--color-pink);
  box-shadow:
    0 0 0 3px var(--color-ink),
    0 0 34px rgba(255, 61, 154, .45),
    12px 14px 0 rgba(0, 0, 0, .55);
  transform: translateY(10px) scale(.98);
  transition: transform .18s ease;
}
.modal.is-open .regen-card { transform: none; }
/* header: sparkle + "AI PROMPT", a dashed underline, and the pink ✕ */
.regen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 2px dashed #3a3670;
}
.regen-head-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--color-pink-light);
}
.regen-head-sparkle { display: inline-flex; color: var(--color-pink); }
.regen-head-sparkle svg { width: 20px; height: 20px; }
/* the pink close X is the shared `.btn btn-pink modal-close` (see modal.css) */
/* body: asset thumb + name/desc, the label, the prompt box, the coin note, the actions */
.regen-body { padding: 18px 18px 20px; }
.regen-asset {
  display: flex;
  flex-wrap: wrap; /* a wide animation strip takes the whole row; the name/desc drop below it */
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
/* The preview frame shrink-wraps the picture at its OWN aspect ratio — a square sprite shows
   square, a wide 6-frame strip shows as the full strip, never squashed into a fixed box. The
   48px minimums keep the frame from collapsing when it holds only the music note glyph. */
.regen-thumb {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: 48px;
  min-height: 48px;
  overflow: hidden;
  border: 2px solid var(--color-ink);
  border-radius: 8px / 6px;
  background: #20204a;
}
/* A song has no picture, so its thumb slot holds a note glyph instead of an empty box. */
.regen-thumb-note {
  font-size: 22px;
  color: var(--color-cyan);
}
/* Natural size, capped: never wider than the modal, never taller than 96px, aspect kept. */
.regen-thumb-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 96px;
  image-rendering: pixelated;
}
.regen-asset-text { min-width: 0; }
.regen-asset-name {
  display: block;
  font-family: var(--font-body);
  font-size: 21px;
  color: #eae7ff;
  line-height: 1.1;
}
.regen-asset-desc {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  color: #7d78b8;
  line-height: 1.1;
}
.regen-label {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1px;
  color: #6f6ab0;
  margin-bottom: 8px;
}
.regen-textarea {
  width: 100%;
  resize: none;
  background: var(--color-ink);
  border: 2px solid #4a468f;
  outline: none;
  color: #f3f1ff;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.35;
  padding: 12px;
  caret-color: var(--color-pink);
}
/* The attached reference picture (image-to-image), under the prompt box: the same 48px framed
   thumb the header row uses, plus one plain line saying the AI looks at it too. The thumb zooms
   (lightbox) on tap — see asset_library.js handleRefPeek. */
.regen-ref {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.regen-ref .regen-thumb { cursor: zoom-in; }
.regen-ref-note {
  font-family: var(--font-body);
  font-size: 15px;
  color: #7d78b8;
  line-height: 1.2;
}
.regen-textarea:focus { border-color: var(--color-pink); }
/* the one-line reminder under a SHEET's motion box — same muted voice as the cost line */
.regen-note {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: #6f6ab0;
}
.regen-cost {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: #6f6ab0;
}
.regen-cost-coin { display: inline-flex; transform: scale(.72); }
/* actions: Cancel (ghost) left, REGENERATE (pink, with coin cost) right */
.regen-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.regen-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.regen-go-coin { display: inline-flex; transform: scale(.82); }
/* the coin badge + cost on the add-asset modal's "DRAW IT!" button (shown only in generate mode) */
.regen-go-coin-wrap { display: inline-flex; align-items: center; gap: 2px; }

/* ---- the IDE's "add to my library" modals — their own parts, on top of the shared skin above ---- */
.addasset-form { display: flex; flex-direction: column; gap: 14px; }
/* the cut-out toggle: a checkbox and a plain-language label */
.addasset-cutout {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 18px;
  color: #eae7ff;
  cursor: pointer;
}
.addasset-cutout input { width: 18px; height: 18px; flex: none; cursor: pointer; }
/* the generate door's WHAT IS IT? radios — one .addasset-cutout row each, stacked */
.addasset-kind { display: flex; flex-direction: column; gap: 8px; }
/* the greyed hint after a label */
.addasset-note { color: #7d78b8; font-size: 15px; }
/* the file door: the "pick a file" button + the chosen name beside it */
.addasset-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.addasset-name {
  font-family: var(--font-body);
  font-size: 17px;
  color: #c9c4f0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- the "+" chooser: three big option cards (icon + title + description) ---- */
.addchooser-list { display: flex; flex-direction: column; gap: 12px; }
/* one option: a full-width arcade row that lifts + tints on hover (like the chat options). */
.addchooser-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  background: var(--color-panel-raised);
  border: 2px solid var(--color-line-2);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.addchooser-choice:hover {
  border-color: var(--color-cyan);
  background: rgba(36, 229, 255, .1);
  transform: translateX(4px);
}
/* the icon square, sized like the regen thumbnail so the rows line up */
.addchooser-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  color: var(--color-cyan);
  background: #20204a;
  border: 2px solid var(--color-ink);
  border-radius: 8px / 6px;
}
.addchooser-icon svg { width: 24px; height: 24px; }

/* In the ADD PICTURES modal the picker is the modal's main event, not the wizard's right-anchored
   side column: spread the header (label left, coin total right), left-align the picture row, and
   let the empty invitation box span the full card width. */
[data-add-pictures-modal] .art-col { margin-left: 0; }
[data-add-pictures-modal] .art-head { justify-content: space-between; }
[data-add-pictures-modal] .art-tiles { justify-content: flex-start; }
[data-add-pictures-modal] .art-tiles-picked:empty + .art-tile-add { width: 100%; }

/* The IDE's upload door takes a drop anywhere on the card (wireDropzone): the pink frame
   turns cyan while a file is held over it, so the whole card says "drop it here". */
.regen-card.is-dragover {
  border-color: var(--color-cyan);
  box-shadow:
    0 0 0 3px var(--color-ink),
    0 0 34px rgba(36, 229, 255, .45),
    12px 14px 0 rgba(0, 0, 0, .55);
}