/*
 * AI Creator Studio - Frontend Card UI
 * Designed to mimic the single-card "mini app" look (like the provided screenshot),
 * while remaining fully isolated from the My Account / Admin CSS.
 */

/*
 * Theme tokens (kept isolated under .aics-card)
 * Uses AI Creator Studio's purple/gold accents, but keeps the dark "mini app" look.
 */
.aics-card{
  --aics-accent: #7600EC;
  --aics-accent-2: #5a00b8;
  --aics-warn: #dba617;
  --aics-bg-1: rgba(12,16,26,.96);
  --aics-bg-2: rgba(7,12,18,.96);
  --aics-border: rgba(255,255,255,.10);
  --aics-border-soft: rgba(255,255,255,.08);
  --aics-text: rgba(255,255,255,.92);
  --aics-text-dim: rgba(255,255,255,.72);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

/* Wide + responsive container */
.aics-shell{
  width: min(1480px, calc(100% - 32px));
  margin: clamp(18px, 3.5vw, 44px) auto;
  padding: clamp(14px, 2.2vw, 22px);
  border-radius: 28px;
  background:
    radial-gradient(1200px 600px at 18% 12%, rgba(118,0,236,.35), transparent 62%),
    radial-gradient(900px 520px at 90% 40%, rgba(219,166,23,.14), transparent 60%),
    linear-gradient(135deg, var(--aics-bg-1), var(--aics-bg-2));
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  border: 1px solid var(--aics-border-soft);
}

.aics-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.aics-brand{display:flex;align-items:center;gap:14px;}
.aics-logo{width:40px;height:40px;border-radius:14px;background:radial-gradient(circle at 30% 30%, #ffe6a1, #6b4cff 55%, #0ad4ff);filter: blur(.0px);}
.aics-title{color:var(--aics-text);font-weight:800;font-size:18px;line-height:1.1;}
.aics-subtitle{color:var(--aics-text-dim);font-size:12px;margin-top:2px;}

.aics-credit{min-width:100px;text-align:center;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--aics-border);}
.aics-credit-label{color:var(--aics-text-dim);font-size:12px;}
.aics-credit-value{color:var(--aics-text);font-weight:900;font-size:18px;margin-top:2px;}

@media (max-width: 640px){
  .aics-header{flex-direction:column;align-items:flex-start;gap:12px;}
  .aics-credit{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;}
}

.aics-steps{display:flex;gap:12px;margin:10px 0 18px;}
.aics-step{flex:1;cursor:pointer;border:0;padding:12px 14px;border-radius:18px;
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.62);
  border:1px solid var(--aics-border-soft);
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.aics-step:hover{transform:translateY(-1px);}
.aics-step--active{background:linear-gradient(90deg, rgba(118,0,236,.78), rgba(90,0,184,.28));color:#fff;}

@media (max-width: 820px){
  .aics-steps{flex-wrap:wrap;}
  .aics-step{flex:1 1 140px;}
}

.aics-grid{display:grid;grid-template-columns: 1fr 1fr;gap:18px;}
@media (max-width: 1024px){.aics-grid{grid-template-columns:1fr;}}

.aics-panel{border-radius:22px;background:rgba(255,255,255,.04);border:1px solid var(--aics-border-soft);padding:16px;}
.aics-panel-title{color:var(--aics-text);font-weight:800;margin-bottom:12px;}

.aics-field{margin-bottom:12px;}
.aics-field-label{color:var(--aics-text-dim);font-size:12px;margin-bottom:6px;}
.aics-file,.aics-select{
  width:100%;padding:12px 12px;border-radius:16px;
  background:rgba(0,0,0,.25);border:1px solid var(--aics-border);
  color:#fff;outline:none;
  max-width:100%;
}
.aics-select{appearance:none;}

/* Style native file input button to match the "Choose from library" ghost button.
   We keep the <input type="file"> visible; only restyle its internal button.
   Works in modern browsers via ::file-selector-button, with WebKit fallback. */
.aics-file{line-height:1.1;}
.aics-file::file-selector-button{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--aics-border);
  color: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
  margin-right: 10px;
}
.aics-file::-webkit-file-upload-button{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--aics-border);
  color: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
  margin-right: 10px;
}
.aics-file:hover::file-selector-button{background: rgba(255,255,255,.09);}
.aics-file:hover::-webkit-file-upload-button{background: rgba(255,255,255,.09);}

.aics-cost{display:inline-block;margin:6px 0 12px;padding:8px 10px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid var(--aics-border-soft);
  color:rgba(255,255,255,.85);font-size:13px;}

.aics-actions{display:flex;gap:10px;flex-wrap:wrap;}
.aics-btn{cursor:pointer;border:0;border-radius:16px;padding:12px 14px;
  background:linear-gradient(135deg, rgba(118,0,236,.95), rgba(90,0,184,.85), rgba(219,166,23,.45));
  background-size: 220% 220%;
  color:#fff;font-weight:700;box-shadow:0 10px 28px rgba(0,0,0,.25);
}
.aics-btn:hover{animation:aicsGradientShift 1.6s ease-in-out infinite alternate;}
.aics-is-busy .aics-btn{animation:aicsGradientShift 1.2s ease-in-out infinite alternate;}
.aics-btn[disabled]{opacity:.55;cursor:not-allowed;animation:none;}
.aics-btn--ghost{background:rgba(255,255,255,.06);border:1px solid var(--aics-border);box-shadow:none;}

@keyframes aicsGradientShift{
  0%{background-position: 0% 50%;}
  100%{background-position: 100% 50%;}
}

.aics-btn--small{padding:10px 12px;font-size:13px;border-radius:14px;}

.aics-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.aics-row .aics-file{flex:1 1 280px;}
.aics-row .aics-btn{flex:0 0 auto;}

/* Inline thumbs sit in the same row as the inputs when space allows,
   but wrap cleanly on small screens. Keeps UI compact without changing look. */
.aics-row--with-thumb .aics-thumb{margin-top:0;}
.aics-thumb--inline{
  flex:0 0 92px;
  width:92px;
  height:52px;
}
.aics-row--with-thumb .aics-thumb--empty{padding:0 8px; text-align:center;}

@media (max-width: 640px){
  .aics-row{flex-direction:column;align-items:stretch;}
  .aics-row--with-thumb{flex-direction:column;}
  .aics-thumb--inline{width:100%;flex:0 0 auto;height:72px;}
}

@media (max-width: 640px){
  .aics-actions{flex-direction:column;}
  .aics-btn{width:100%;}
  /* Keep native file input from visually "stretching" due to long file names */
  .aics-file{font-size:14px;}
}

.aics-note{margin-top:10px;color:rgba(255,255,255,.75);font-size:13px;min-height:18px;}
.aics-note.aics-note--error{color:#ffb2b2;}
.aics-note.aics-note--ok{color:#b7ffcf;}

/* Card note actions (login/buy credits links). Keep minimal to avoid UI drift. */
.aics-note__actions{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;}

.aics-preview{border-radius:18px;min-height:460px;background:rgba(0,0,0,.18);border:1px dashed rgba(255,255,255,.16);padding:12px;}
.aics-preview-inner{width:100%;height:100%;min-height:396px;border-radius:14px;background:radial-gradient(700px 400px at 25% 20%, rgba(120,90,255,.25), transparent 60%),
  radial-gradient(600px 350px at 75% 70%, rgba(219,166,23,.12), transparent 55%),
  rgba(255,255,255,.02);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);
}
.aics-preview-inner img, .aics-preview-inner video{max-width:100%;max-height:100%;border-radius:14px;}

/* ---------------- Background Library Modal (carbon overlay) ---------------- */
.aics-modal{position:fixed;inset:0;z-index:999999;display:none;}
.aics-modal.aics-modal--open{display:block;}

.aics-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter: blur(2px);}

.aics-modal__panel{position:relative;max-width:min(1180px, calc(100% - 28px));margin: min(6vh, 60px) auto;
  background:rgba(18,20,28,.96);border:1px solid rgba(255,255,255,.10);border-radius:22px;
  box-shadow:0 30px 90px rgba(0,0,0,.55);padding:14px;}

.aics-modal__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 12px;}
.aics-modal__title{color:var(--aics-text);font-weight:900;font-size:16px;}
.aics-modal__close{border:0;background:rgba(255,255,255,.06);border:1px solid var(--aics-border);color:#fff;
  width:38px;height:38px;border-radius:14px;font-size:20px;cursor:pointer;}

.aics-modal__controls{display:flex;gap:10px;flex-wrap:wrap;padding:0 8px 12px;}
.aics-modal__search,.aics-modal__select{padding:12px 12px;border-radius:16px;background:rgba(0,0,0,.25);
  border:1px solid var(--aics-border);color:#fff;outline:none;}
.aics-modal__search{flex:1 1 360px;}
.aics-modal__select{flex:0 0 260px;}

.aics-modal__grid{display:grid;grid-template-columns:repeat(6, 1fr);gap:10px;padding:0 8px 10px;}
@media (max-width: 1180px){.aics-modal__grid{grid-template-columns:repeat(5, 1fr);}}
@media (max-width: 980px){.aics-modal__grid{grid-template-columns:repeat(4, 1fr);}}
@media (max-width: 760px){.aics-modal__grid{grid-template-columns:repeat(3, 1fr);}}
@media (max-width: 540px){.aics-modal__grid{grid-template-columns:repeat(2, 1fr);}}

.aics-modal__item{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);border-radius:16px;
  overflow:hidden;cursor:pointer;text-align:left;padding:0;}
.aics-modal__item img{width:100%;height:130px;object-fit:cover;display:block;}
.aics-modal__item-meta{padding:8px 10px;}
.aics-modal__item-title{color:rgba(255,255,255,.86);font-weight:700;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.aics-modal__item-cat{color:rgba(255,255,255,.60);font-size:11px;margin-top:2px;}
.aics-modal__item:hover{transform:translateY(-1px);transition:transform .12s ease;}

.aics-modal__footer{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 8px 6px;}
.aics-modal__page{color:rgba(255,255,255,.72);font-size:13px;min-width:72px;text-align:center;}
.aics-modal__loading{grid-column:1 / -1;color:rgba(255,255,255,.72);padding:28px;text-align:center;}


/* Thumbnail previews for chosen background/overlay */
.aics-thumb{
  margin-top: 10px;
  height: 96px;
  border-radius: 14px;
  border: 1px solid var(--aics-border-soft);
  background: rgba(0,0,0,.28);
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.aics-thumb img{max-height:100%; max-width:100%; display:block; object-fit:contain;}
.aics-thumb--empty{opacity:.55; font-size:12px; color: var(--aics-text-dim);}

.aics-is-hidden{display:none !important;}

/* Step locking */
.aics-step.aics-step--locked{opacity:.45; cursor:not-allowed;}

/* --- v1.3.1: Mobile-safe thumbnails layout (prevents huge empty dark blocks) --- */
.aics-row--bg,
.aics-row--overlay{
  display:grid;
  align-items:center;
  gap:10px;
}
.aics-row--bg{ grid-template-columns: 1fr auto 92px; }
.aics-row--overlay{ grid-template-columns: 1fr 92px; }

.aics-row--bg .aics-file,
.aics-row--overlay .aics-file{ min-width:0; width:100%; }

.aics-row--bg .aics-thumb--inline,
.aics-row--overlay .aics-thumb--inline{ width:92px; height:52px; }

@media (max-width: 640px){
  .aics-row--bg{
    grid-template-columns: 1fr 72px;
    grid-template-areas:
      "file thumb"
      "btn btn";
  }
  .aics-row--bg .aics-file{ grid-area:file; }
  .aics-row--bg [data-aics-open-bg]{ grid-area:btn; width:100%; }
  .aics-row--bg .aics-thumb--inline{ grid-area:thumb; width:72px; height:52px; justify-self:end; }

  .aics-row--overlay{ grid-template-columns: 1fr 72px; }
  .aics-row--overlay .aics-thumb--inline{ width:72px; height:52px; justify-self:end; }
}