/* assets/css/content-studio.css (v3.5.0)
   - Larger preview area
   - Figures UNDER the preview
   - Variants panel
   - Sticky toolbar

   Design refresh notes:
   * Softened background and card colours for a calmer studio vibe.
   * Increased iframe flexibility so creatives can resize the window.
   * Buttons and accents use a consistent blue theme.
   * Future idea: allow user-selectable themes (light/dark) via CSS variables.
*/

.bgad-cs-wrap {
  --gap:16px;
  --bg:#f8faff; /* TODO: expose as theme setting */
  --card-bg:#ffffff;
  --border:#e5e7eb;
  background:var(--bg);
}
.bgad-cs-header {
  display:flex; align-items:center; justify-content:space-between;
  margin: 12px 0 8px;
}
.bgad-cs-usage { font-size:14px; color:#444; }

.bgad-cs-grid {
  display:grid;
  grid-template-columns: 340px 1fr;
  gap: var(--gap);
}

@media (max-width: 1280px) {
  .bgad-cs-grid { grid-template-columns: 1fr; }
}

.bgad-cs-card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 14px 16px;
  box-shadow:0 1px 1px rgba(0,0,0,.06);
  position:relative;
}

.bgad-cs-card h2.hndle { margin: 2px 2px 10px; font-size:18px; }
.bgad-cs-fieldset { margin-bottom:12px; }
.bgad-cs-inline { display:inline-block; margin-right:14px; margin-bottom:8px; }
.bgad-cs-hint { font-size:12px; color:#666; }

.bga4-alert {
  background:#fff6d7; border:1px solid #f0d675; padding:10px; border-radius:8px; margin-bottom:12px;
}

.bgad-cs-main { overflow:hidden; }

/* Toolbar */
.bgad-cs-toolbar {
  position: sticky; top: 32px; z-index: 10;
  display:flex; gap:10px; flex-wrap:wrap;
  background:var(--card-bg);
  padding:8px 6px 10px;
  margin:-14px -14px 10px;
  border-bottom:1px solid var(--border);
  border-top-left-radius:12px;
  border-top-right-radius:12px;
}
.bgad-cs-toolbar .button {
  font-size:14px; height:auto; padding:8px 14px; border-radius:8px;
}

.bgad-cs-guard { text-align:center; margin:80px auto; max-width:400px; }
.bgad-cs-guard input { width:100%; }
.bgad-boilerplate-badge { background:#d4af37; color:#000; padding:2px 6px; border-radius:4px; font-size:12px; margin-left:8px; vertical-align:middle; }
.bgad-cs-log .error { color:#c00; }

/* Status */
.bgad-cs-status {
  display:flex; align-items:center; gap:14px; margin-bottom:10px;
}
#bgad-cs-note { font-size:14px; color:#333; }
.bgad-cs-progress { flex:1; height:8px; background:#f1f5f9; border-radius:6px; overflow:hidden; }
.bgad-cs-progress span { display:block; height:100%; width:2%; background:#2563eb; }

/* Preview */
.bgad-cs-preview { margin-bottom: 14px; }
.bgad-cs-iframe-wrap {
  border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;
  background:#fafafa;
}
#bgad-cs-iframe {
  display:block;
  width:100%;
  min-height:90vh; /* larger preview */
  border:0;
  background:#fff;
  border-radius:0 0 12px 12px;
}

/* Variants */
.bgad-cs-variants { margin-top: 8px; }
.bgad-cs-variants h3 { margin: 8px 0; }
.bgad-cs-variants-content { border:1px solid #e5e7eb; border-radius:10px; padding:10px; background:#1e293b; color:#f8fafc; }
.variants-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.variant-col { display:flex; flex-direction:column; gap:12px; }
.variant-item { display:flex; flex-direction:column; align-items:center; gap:8px; background:#1e293b; padding:8px; border-radius:8px; }
.variant-item:hover { background:#334155; }
.variant-item span { font-weight:600; }
.variant-item img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:4px; }
.variant-actions { display:flex; gap:8px; }
.variant-actions .button { height:auto; padding:4px 8px; }

/* Processing overlay */
.bgad-cs-processing {
  position:fixed; inset:0;
  background:rgba(10,12,16,.7);
  z-index:9999;
  display:none; align-items:center; justify-content:center;
  flex-direction:column;
  color:#f3f4f6;
}
.bgad-cs-processing .msg { margin-top:10px; font-weight:600; }
.bgad-cs-processing .bgad-spinner {
  width:64px; height:64px; border:6px solid #fff; border-top-color:transparent;
  border-radius:50%; animation:bgad-spin 1s linear infinite;
}
@keyframes bgad-spin { to { transform:rotate(360deg); } }

/* Figures under preview */
.bgad-cs-figs-under { margin-top: 12px; }
.bgad-cs-thumbs { list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.bgad-cs-thumbs .thumb { display:grid; grid-template-rows:auto 1fr; gap:6px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; }
.thumb-btn { border:0; padding:0; cursor:pointer; background:transparent; }
.thumb-btn img { display:block; width:100%; height:auto; }
.thumb-cap { font-size:12px; color:#333; padding:6px 8px 10px; }

#bgad-cs-stage2-images { grid-template-columns:repeat(3,1fr); gap:12px; }
#bgad-cs-stage2-images .thumb { background:#1e293b; border-radius:8px; border:1px solid #334155; }
#bgad-cs-stage2-images .thumb-btn img { height:180px; object-fit:cover; }
#bgad-cs-stage2-images .thumb-cap { color:#f8fafc; }

.bgad-cs-library-under summary { cursor:pointer; margin-top: 12px; font-weight:600; }
.bgad-cs-actions-small { margin:8px 0; }
.bgad-cs-figs-nav { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px; }
.bgad-cs-figs-nav .button { height:auto; padding:4px 8px; }

/* Log */
.bgad-cs-log {
  background:#0b1020; color:#d1e0ff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  border-radius:8px; padding:10px; max-height:220px; overflow:auto;
}
.bgad-cs-log > div { font-size:12px; padding:2px 0; }

.bgad-cs-list { list-style:disc; margin: 6px 0 0 20px; }

/* Stage 3 social posts */
#bgad-cs-stage3-wrap { display:none; background:#f9fafc; border:2px solid #d0d7de; padding:12px; border-radius:8px; margin-top:12px; }
#bgad-cs-stage3-wrap.active { display:block; }

.bgad-cs-social-post { display:flex; gap:12px; margin-bottom:16px; padding:12px; border:2px solid #ccc; border-radius:8px; background:#fff; }
.bgad-cs-post-body { flex:2; display:flex; flex-direction:column; }
.bgad-cs-post-label { display:flex; align-items:center; gap:6px; color:#fff; padding:4px 8px; border-radius:4px; margin-bottom:6px; font-weight:bold; }
.bgad-cs-post-label img { width:16px; height:16px; }
.bgad-cs-post-text { flex:1; resize:vertical; max-height:180px; overflow-y:auto; padding:6px; }
.bgad-cs-post-actions { margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
.bgad-cs-post-actions .button { height:auto; padding:4px 8px; }
.bgad-cs-post-media { flex:1; display:flex; flex-direction:column; gap:8px; align-items:center; }
.bgad-cs-post-media img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px; }
.bgad-cs-post-media a { display:block; font-size:12px; text-align:center; }

/* Stage 4 header images */
.bgad-cs-header canvas {
  display:block;
  margin:10px 0;
  max-width:100%;
  height:auto;
}

.bgad-contrast { background:#0f1115; color:#f3f4f6; padding:12px 16px; border-radius:12px; margin:12px 0 18px; }
#bgad-cs-header-wrap{color:#fff;}
#bgad-cs-header-wrap h2,#bgad-cs-header-wrap h3{color:#fff;}
.bgad-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.bgad-card { background:#111418; border:1px solid #242833; border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:8px; transition:border-color .2s; color:#e5e7eb; font-weight:300; }
.bgad-card:hover { border-color:#3b4251; }
.bgad-card .thumb {
  width:100%;
  height:auto;               /* let the image determine height */
  aspect-ratio:auto;         /* use JS-set aspect-ratio when known */
  object-fit:contain;        /* no cropping; show whole image */
  background:#0b1020;        /* dark letterboxing for readability */
  border-radius:8px;
  display:block;
  transition:transform .2s;
}
.bgad-card:hover .thumb { transform:scale(1.03); }
/* Make the tiny meta text more legible on dark cards */
.bgad-card .info { line-height:1.2; color:#e5e7eb; font-weight:400; }
.bgad-card .info .res { font-weight:300; color:#cbd5e1; }
.bgad-card .actions { display:flex; gap:8px; margin-top:auto; }
  .bgad-card .actions .button { flex:1; text-align:center; font-weight:300; }
  .bgad-accordion details { background:#0f1115; border:1px solid #242833; border-radius:12px; margin:8px 0; padding:6px 10px; }

  #bgad-header-modal {
    position:fixed; inset:0; background:rgba(15,17,21,.8);
    display:none; align-items:center; justify-content:center; z-index:10000;
  }
  #bgad-header-modal .inner {
    background:#111418; padding:20px; border-radius:12px; text-align:center;
    max-width:90%; max-height:90%;
  }
  #bgad-header-modal img { max-width:100%; height:auto; border-radius:8px; }
  #bgad-header-modal .actions { margin-top:12px; display:flex; gap:8px; }
  #bgad-header-modal .actions .button { flex:1; }