/* ── PimpstarAI · 🖼️ Create Images (Gem Studio) ──────────────────── */
/* purple gem currency accent */
:root{ --gem:#a855f7; --gem-2:#c084fc; --gem-rgb:168,85,247; }
.gi-ov{position:fixed; inset:0; z-index:1250; background:rgba(6,4,10,.9); backdrop-filter:blur(7px); overflow-y:auto; padding:20px 14px 50px}
.gi-ov[hidden]{display:none}
.gi-modal{position:relative; max-width:1120px; margin:0 auto; background:var(--card,#150d1e); border:1px solid var(--border2,#3a2850); border-radius:20px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.6)}
.gi-x{position:absolute; top:14px; right:14px; z-index:6; width:34px; height:34px; border-radius:10px; border:1px solid var(--border2,#3a2850); background:rgba(0,0,0,.4); color:var(--text,#f0e6f5); cursor:pointer; font-size:15px}
.gi-x:hover{border-color:var(--gem)}
.gi-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:26px 30px 20px; background:radial-gradient(120% 140% at 0% 0%, rgba(var(--gem-rgb),.22), transparent 55%), linear-gradient(160deg, rgba(var(--gem-rgb),.14), rgba(88,28,135,.1)); border-bottom:1px solid var(--border,#2a1c3a)}
.gi-badge{display:inline-block; font-family:var(--fm,monospace); font-size:10px; letter-spacing:2px; font-weight:700; color:var(--gem-2); border:1px solid rgba(var(--gem-rgb),.45); border-radius:999px; padding:4px 11px; margin-bottom:10px}
.gi-head h1{margin:0; font-size:26px; font-weight:800; letter-spacing:-.5px}
.gi-gembar{display:flex; align-items:center; gap:12px; flex-shrink:0}
#giGems{font-size:14px; color:var(--text,#f0e6f5); white-space:nowrap}
#giGems b{color:var(--gem-2); font-size:16px}
.gi-gem{filter:drop-shadow(0 0 5px rgba(var(--gem-rgb),.7))}
.gi-getbtn, .gi-mini[data-store], .gi-slot-btn[data-store]{cursor:pointer}
.gi-getbtn{padding:8px 14px; border-radius:10px; border:1px solid rgba(var(--gem-rgb),.5); background:linear-gradient(135deg, rgba(var(--gem-rgb),.25), rgba(88,28,135,.2)); color:var(--gem-2); font:700 12.5px inherit; cursor:pointer}
.gi-getbtn:hover{filter:brightness(1.15)}
.gi-body{display:grid; grid-template-columns:340px 1fr; gap:0; align-items:stretch}
.gi-controls{padding:22px 24px; border-right:1px solid var(--border,#2a1c3a); display:flex; flex-direction:column}
.gi-label{display:block; font-family:var(--fm,monospace); font-size:10px; letter-spacing:1.6px; font-weight:700; color:var(--dim,#7a6a8e); margin:16px 0 8px}
.gi-label:first-child{margin-top:0}
.gi-prompt{width:100%; min-height:120px; resize:vertical; background:rgba(0,0,0,.28); border:1px solid var(--border2,#3a2850); border-radius:12px; color:var(--text,#f0e6f5); font:inherit; font-size:13.5px; line-height:1.55; padding:12px 14px}
.gi-prompt:focus, .gi-negta:focus{outline:none; border-color:var(--gem)}
.gi-neg{margin-top:10px}
.gi-neg summary{cursor:pointer; font-size:12px; color:var(--dim,#7a6a8e); list-style:none}
.gi-neg summary::-webkit-details-marker{display:none}
.gi-neg summary::before{content:'▸ '; color:var(--gem-2)}
.gi-neg[open] summary::before{content:'▾ '}
.gi-negta{width:100%; min-height:64px; margin-top:8px; resize:vertical; background:rgba(0,0,0,.28); border:1px solid var(--border2,#3a2850); border-radius:10px; color:var(--text,#f0e6f5); font:inherit; font-size:12.5px; line-height:1.5; padding:9px 11px}
.gi-chips{display:flex; flex-wrap:wrap; gap:7px}
.gi-chip{padding:7px 12px; border-radius:10px; border:1px solid var(--border2,#3a2850); background:transparent; color:var(--mid,#b09cc4); cursor:pointer; font:600 12px inherit; transition:.13s}
.gi-chip:hover{color:var(--text,#f0e6f5)}
.gi-chip.on{color:var(--gem-2); background:rgba(var(--gem-rgb),.15); border-color:rgba(var(--gem-rgb),.5)}
.gi-row{display:flex; gap:16px}
.gi-row>div{flex:1}
.gi-genrow{margin-top:auto; padding-top:20px}
.gi-genbtn{width:100%; padding:13px; border-radius:12px; border:none; background:linear-gradient(135deg, var(--gem), #7c3aed); color:#fff; font:800 14px inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 6px 20px rgba(var(--gem-rgb),.35)}
.gi-genbtn:hover{filter:brightness(1.1)}
.gi-cost{font-size:11.5px; font-weight:600; opacity:.85}
.gi-output{padding:22px 24px}
.gi-grid{display:grid; gap:12px}
.gi-grid.n1{grid-template-columns:1fr; max-width:460px; margin:0 auto}
.gi-grid.n2{grid-template-columns:repeat(2,1fr)}
.gi-grid.n4{grid-template-columns:repeat(2,1fr)}
.gi-slot{position:relative; aspect-ratio:var(--slot-ar,3/4); border:1px solid var(--border,#2a1c3a); border-radius:14px; overflow:hidden; background:rgba(0,0,0,.28); transition:border-color .15s}
.gi-slot:hover{border-color:rgba(var(--gem-rgb),.4)}
.gi-slot-in{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.gi-slot-empty{font-size:30px; color:var(--border2,#3a2850)}
.gi-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; transition:transform .25s}
.gi-slot:hover .gi-img{transform:scale(1.02)}
.gi-slot-acts{position:absolute; bottom:8px; right:8px; display:flex; gap:6px; z-index:2}
.gi-slot-btn{width:32px; height:32px; border-radius:9px; border:1px solid var(--border2,#3a2850); background:rgba(10,7,16,.72); backdrop-filter:blur(3px); color:var(--text,#f0e6f5); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; text-decoration:none}
.gi-slot-btn:hover{color:var(--gem-2); border-color:var(--gem)}
.gi-spin{display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--mid,#b09cc4); font-size:12px}
.gi-ring{width:32px; height:32px; border-radius:50%; border:3px solid rgba(var(--gem-rgb),.2); border-top-color:var(--gem); animation:gispin .8s linear infinite}
@keyframes gispin{to{transform:rotate(360deg)}}
.gi-err{font-size:11.5px; line-height:1.5; color:#ff9aa6; text-align:center; padding:12px}
.gi-mini{margin-top:6px; padding:5px 10px; border-radius:8px; border:1px solid var(--border2,#3a2850); background:transparent; color:var(--gem-2); cursor:pointer; font:600 11px inherit}
.gi-mini:hover{border-color:var(--gem)}
@media(max-width:820px){.gi-body{grid-template-columns:1fr}.gi-controls{border-right:0; border-bottom:1px solid var(--border,#2a1c3a)}}
@media(max-width:560px){.gi-head{padding:22px 18px 16px}.gi-head h1{font-size:21px}.gi-output,.gi-controls{padding:18px}}
/* purple crystal gem icon */
.gem-ico{display:inline-block; vertical-align:-0.14em; filter:drop-shadow(0 0 4px rgba(var(--gem-rgb,168,85,247),.55))}
#giGems .gem-ico{width:1.05em; height:1.05em}
.gi-badge .gem-ico{width:.95em; height:.95em; vertical-align:-0.1em}/* ── v2: style picture-cards (model cover art) ── */
.gi-labelrow{display:flex; align-items:center; justify-content:space-between; gap:10px}
.gi-labelrow .gi-label{margin:16px 0 8px}
.gi-labelrow:first-child .gi-label{margin-top:0}
.gi-mini.glow{color:var(--gem-2); border-color:rgba(var(--gem-rgb),.45); margin-top:0}
.gi-mini.glow:hover{box-shadow:0 0 12px rgba(var(--gem-rgb),.35)}
.gi-stylegrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.gi-stylecard{position:relative; padding:0; border:2px solid var(--border2,#3a2850); border-radius:12px; overflow:hidden; background:rgba(0,0,0,.25); cursor:pointer; display:flex; flex-direction:column; transition:border-color .15s, box-shadow .15s, transform .15s}
.gi-stylecard:hover{border-color:rgba(var(--gem-rgb),.55); transform:translateY(-2px)}
.gi-stylecard.on{border-color:var(--gem); box-shadow:0 0 0 3px rgba(var(--gem-rgb),.28)}
.gi-stylecard.on::before{content:'✓'; position:absolute; top:5px; left:5px; z-index:3; width:18px; height:18px; border-radius:50%; background:var(--gem); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.45)}
.gi-stylecard.tuned::after{content:'✦'; position:absolute; top:4px; right:6px; z-index:3; font-size:10px; color:#7fe9c0; text-shadow:0 1px 4px rgba(0,0,0,.7)}
.gi-styleimg{position:relative; display:block; aspect-ratio:4/5; overflow:hidden}
.gi-styleimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.gi-stylelbl{font:600 10px inherit; padding:5px 3px 6px; text-align:center; color:var(--mid,#b09cc4); background:var(--card,#150d1e); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gi-stylecard.on .gi-stylelbl{color:var(--gem-2)}
/* gradient fallbacks while covers load / if generation is off */
.sty-anime{background:linear-gradient(135deg,#ff3d8b,#7c3aed)}
.sty-retroanime{background:linear-gradient(135deg,#f97316,#0d9488)}
.sty-semireal{background:linear-gradient(135deg,#a855f7,#312e81)}
.sty-painterly{background:linear-gradient(135deg,#b45309,#7f1d1d)}
.sty-watercolor{background:linear-gradient(135deg,#67e8f9,#fda4af)}
.sty-comic{background:linear-gradient(135deg,#facc15,#dc2626)}
.sty-render3d{background:linear-gradient(135deg,#38bdf8,#64748b)}
.sty-darkfantasy{background:linear-gradient(135deg,#1e1b2e,#5b21b6)}
.sty-photo{background:linear-gradient(135deg,#94a3b8,#1e3a5f)}
/* size chips with sub-ratio */
.gi-chip em{font-style:normal; font-size:10px; color:var(--dim,#7a6a8e); margin-left:2px}
.gi-chip.on em{color:var(--gem-2)}
/* seed row */
.gi-seedrow{display:flex; gap:6px; margin-top:8px}
.gi-seed{flex:1; min-width:0; background:rgba(0,0,0,.28); border:1px solid var(--border2,#3a2850); border-radius:10px; color:var(--text,#f0e6f5); font:inherit; font-size:12.5px; padding:8px 10px}
.gi-seed:focus{outline:none; border-color:var(--gem)}
.gi-seedrow .gi-mini{margin-top:0}
.gi-hint{margin-top:6px; font-size:10.5px; color:var(--dim,#7a6a8e); line-height:1.45}
/* queued shimmer */
.gi-shimmer{position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(var(--gem-rgb),.12) 50%, transparent 70%); background-size:220% 100%; animation:gishim 1.4s linear infinite}
@keyframes gishim{from{background-position:180% 0}to{background-position:-80% 0}}
.gi-spin.over{position:relative; z-index:2}
/* result action pills */
.gi-slot-btn.seed{font-size:15px}
.gi-cost-per{opacity:.7; font-weight:500}
/* lightbox */
.gi-lb{position:fixed; inset:0; z-index:1400; background:rgba(4,2,8,.93); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:22px}
.gi-lb[hidden]{display:none}
.gi-lb-in{max-width:min(94vw,900px); max-height:92vh; display:flex; flex-direction:column; gap:12px; align-items:center}
.gi-lb-in img{max-width:100%; max-height:calc(92vh - 60px); border-radius:14px; box-shadow:0 24px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--gem-rgb),.25)}
.gi-lb-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center}
.gi-lb-bar .gi-mini{margin-top:0; text-decoration:none}
.gi-lb-seed{font-family:var(--fm,monospace); font-size:11.5px; color:var(--gem-2)}
/* session gallery */
.gi-hist{margin-top:18px; border-top:1px solid var(--border,#2a1c3a); padding-top:14px}
.gi-hist-h{font-family:var(--fm,monospace); font-size:10px; letter-spacing:1.6px; font-weight:700; color:var(--dim,#7a6a8e); margin-bottom:10px}
.gi-hist-h span{color:var(--gem-2); margin-left:6px}
.gi-hist-row{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px}
.gi-hist-th{flex:0 0 auto; width:74px; height:74px; padding:0; border:1px solid var(--border2,#3a2850); border-radius:10px; overflow:hidden; cursor:zoom-in; background:rgba(0,0,0,.25); transition:border-color .15s, transform .15s}
.gi-hist-th:hover{border-color:var(--gem); transform:translateY(-2px)}
.gi-hist-th img{width:100%; height:100%; object-fit:cover; display:block}
/* premium combo styles */
.gi-prem{position:absolute; top:4px; left:5px; z-index:3; font-size:11px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.gi-stylecard.on .gi-prem{top:24px}
.gi-stylecard.locked{opacity:.75}
.gi-stylecard.locked .gi-styleimg{filter:grayscale(.5) brightness(.75)}
.gi-lock{position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; font-size:20px; background:rgba(6,4,10,.35); text-shadow:0 2px 8px rgba(0,0,0,.8)}
.gi-chip.dim{opacity:.5}
/* ── viewport-bounded layout: the modal never exceeds the screen; the
   controls rail and the results pane scroll independently inside it ── */
.gi-ov{display:flex; align-items:center; justify-content:center; overflow:hidden; padding:18px 12px}
.gi-modal{display:flex; flex-direction:column; width:100%; max-height:calc(100dvh - 36px)}
.gi-head{flex:0 0 auto}
.gi-body{flex:1 1 auto; min-height:0; overflow:hidden}
.gi-controls{overflow-y:auto; min-height:0; overscroll-behavior:contain}
.gi-output{overflow-y:auto; min-height:0; overscroll-behavior:contain}
.gi-grid{align-content:start}
/* on small screens, fall back to natural page scrolling (no nested scroll traps) */
@media(max-width:820px){
  .gi-ov{display:block; overflow-y:auto; padding:16px 10px 40px}
  .gi-modal{max-height:none}
  .gi-body{overflow:visible}
  .gi-controls,.gi-output{overflow:visible}
}