/*
  @version 1.2.3 (2025-09-01) — Light theme UI to match provided mock:
  - White cards, soft shadow, rounded corners
  - Pastel header icon badges
  - Light dashed dropzone
  - Full-width "Browse Files" button
  - Two-column chip grid
  - Gradient primary Generate button
*/

.pai-image-entry{
  max-width:1200px;margin:0 auto;padding:24px;
}
.pai-row{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:900px){.pai-row{grid-template-columns:1fr 1fr}}

.pai-card{
  background:#ffffff;
  border:1px solid #eef2f7;
  border-radius:18px;
  padding:28px;
  box-shadow:0 6px 20px rgba(15,23,42,0.06);
  position:relative;
}

/* Headings + helper text */
.pai-card h3{
  margin:0 0 10px;
  font-size:26px;
  font-weight:800;
  line-height:1.2;
}
.pai-card p{
  margin:0 0 18px;
  color:#64748b;
  font-size:15px;
}

/* Light icon badge at top of each card (decorative) */
.pai-card::before{
  content:'';
  position:absolute;
  top:-18px; left:28px;
  width:44px; height:44px;
  border-radius:999px;
  background:linear-gradient(180deg,#eef2ff,#e9f0ff);
  border:1px solid #e6ecfb;
  box-shadow:0 6px 14px rgba(59,130,246,.12);
  display: none;
}
.pai-card:nth-child(2)::before{
  background:linear-gradient(180deg,#eef7ff,#eafdf5);
  border-color:#e6f6ef;
}

/* Dropzone */
.pai-drop{
  border:2px dashed #e6eaf0;
  background:#f8fafc;
  color:#475569;
  border-radius:14px;
  padding:38px 20px;
  text-align:center;
  transition:.15s ease-in-out;
}
.pai-drop.dragover{border-color:#7c3aed;background:#f3f0ff}
.pai-drop strong{display:block;font-weight:700;margin-bottom:6px}
.pai-drop small{display:block;opacity:.75}

/* File input styled as full-width button */
.pai-browse{margin-top:16px}
.pai-browse input[type="file"]{
  appearance:none;
  width:100%;
  border:1px solid #e6eaf0;
  background:#ffffff;
  border-radius:10px;
  padding:12px 14px;
  cursor:pointer;
  font-size:14px;
  color:#111827;
}
.pai-browse input[type="file"]::-webkit-file-upload-button{
  visibility:hidden; padding:0; margin:0; border:0;
}
.pai-browse input[type="file"]::before{
  content:'Browse Files';
  display:inline-block;
  text-align:center; width:100%;
}

/* Thumbnails grid (kept minimal for clean mock look) */
.pai-thumbs{
  margin-top:16px;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px;
}
@media(min-width:560px){.pai-thumbs{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.pai-thumbs{grid-template-columns:repeat(5,1fr)}}
.pai-thumb{
  position:relative;border:1px solid #e6eaf0;border-radius:12px;overflow:hidden;aspect-ratio:1/1;background:#fff;
}
.pai-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pai-thumb-remove{
  position:absolute;top:6px;right:6px;border:0;width:24px;height:24px;border-radius:999px;
  background:rgba(0,0,0,0.6);color:#fff;line-height:22px;font-size:14px;cursor:pointer
}

/* Textarea */
.pai-textarea{
  width:100%; min-height:120px; border-radius:12px;
  border:1px solid #e6eaf0; background:#f3f4f6; color:#111827;
  padding:14px 16px; font-size:15px;
}

/* Chips in a 2-col grid */
.pai-chips{
  margin:14px 0 18px;
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  display: none;
}
.pai-chip{
  border:1px solid #e6eaf0; border-radius:10px;
  padding:10px 12px; font-size:14px; text-align:center;
  background:#ffffff; color:#334155; cursor:pointer; user-select:none;
}
.pai-chip:hover{border-color:#9ca3af}

/* Actions + primary button (gradient like mock) */
.pai-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pai-gen-btn{
  background:linear-gradient(90deg,#3b82f6,#10b981)!important;
  border:0!important;
  color:#fff!important;
  box-shadow:0 8px 14px rgba(59,130,246,.18);
}
.pai-gen-btn.is-loading{
  opacity:.85; pointer-events:none; position:relative;
}
.pai-gen-btn.is-loading::after{
  content:'';
  display:inline-block; width:16px; height:16px; margin-left:8px; vertical-align:-2px;
  border-radius:50%; border:2px solid rgba(255,255,255,.9); border-right-color:transparent;
  animation:pai-spin .8s linear infinite;
}
@keyframes pai-spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* Generated result area */
.pai-result{margin-top:26px; text-align:center}
.pai-result img{
  max-width:100%; height:auto; border-radius:12px;
  border:1px solid #eef2f7; box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.pai-result-actions{justify-content:center;margin-top:14px}
.pai-download-btn{
  background:#f1f5f9!important; color:#0f172a!important; border:1px solid #e6eaf0!important;
}