/* ─────────────────────────────────────────────────────────────
   CapraSEO — image generator (content/image-generator/)
   A single modern prompt surface (reference images attach inside it)
   plus a clean gallery of generated images. Mockup only — the real
   generation pipeline + AI-context bundle land later.
   ───────────────────────────────────────────────────────────── */

.center.center-scroll.ig {
  align-items: stretch;           /* let composer + gallery fill the width */
  justify-content: flex-start;
  padding: 14px 36px 56px;
  gap: 30px;
  overflow-y: auto;
}
/* Composer + history span the full content width. */
.ig > * {
  width: 100%;
  flex-shrink: 0;
}

/* ── Prompt surface ────────────────────────────────────────── */
.ig-composer {
  position: relative;
  /* backdrop-filter makes this a stacking context; without a z-index the
     whole composer (and its open dropdown menus) paints under the gallery
     section that follows it in the DOM. Lift it above. */
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(var(--dk13-rgb),0.72) 0%, rgba(var(--glass-lo-rgb),0.82) 100%);
  border: 1px solid rgba(var(--wash-rgb), 0.07);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.05),
    0 18px 50px -22px rgba(0,0,0,0.65);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ig-composer:focus-within {
  border-color: rgba(var(--accent-rgb),0.40);
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.05),
    0 0 0 3px rgba(var(--accent-rgb),0.10),
    0 18px 50px -22px rgba(0,0,0,0.65);
}

/* Reference thumbnails, attached inside the surface */
.ig-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px 0;
}
.ig-refs[hidden] { display: none; }
.ig-ref {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 9px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(var(--wash-rgb), 0.12);
  box-shadow: 0 4px 12px -6px rgba(0,0,0,0.6);
}
.ig-ref-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(var(--wash-rgb), 0.12);
  background: var(--ctl-2);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.ig-ref:hover .ig-ref-remove { opacity: 1; transform: scale(1); }
.ig-ref-remove:hover { background: var(--danger); color: #fff; border-color: transparent; }
.ig-ref-remove svg { width: 10px; height: 10px; }

/* Prompt textarea — borderless, the surface is the frame */
.ig-prompt {
  width: 100%;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  padding: 15px 17px 4px;
  min-height: 52px;
  max-height: 220px;
  overflow-y: auto;
}
.ig-prompt::placeholder { color: var(--grey-2); }

/* Toolbar: attach + model picker (left) · generate (right) */
.ig-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 9px 9px 11px;
}
.ig-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;            /* let the model chip's label ellipsis kick in */
}
/* The chip styling comes from chat.css; nudge the height so it lines up
   with the "Add image" button in this toolbar. */
.ig-toolbar .chip { height: 32px; }
.ig-model .chip-label { max-width: 150px; }
/* chat.css forces the model menu to open UPWARD (its composer is anchored
   to the bottom of the screen). Here the composer sits at the TOP, so an
   upward menu clips behind the header — flip it back to opening downward. */
.dropdown.ig-model[data-dropdown="model"] .menu,
.dropdown.ig-size[data-dropdown="size"] .menu {
  top: calc(100% + 8px);
  bottom: auto;
  transform: translateY(-4px);
}
.dropdown.ig-model[data-dropdown="model"] .menu.open,
.dropdown.ig-size[data-dropdown="size"] .menu.open {
  transform: translateY(0);
}

/* Dimension menu: wide enough that each row — "Wide · 16:9" + the muted
   use-case hint — stays on a single line. */
.dropdown.ig-size .menu { min-width: 288px; }
.dropdown.ig-size .menu-item .mi-label { white-space: nowrap; }
.dropdown.ig-size .menu-item .mi-sub {
  font-size: 11.5px;
  color: var(--muted-2);
  margin-left: auto;
  padding-left: 14px;
  white-space: nowrap;
}
.dropdown.ig-size .menu-item.selected .mi-sub { color: var(--muted); }
.ig-attach {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 11px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid rgba(var(--wash-rgb), 0.08);
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ig-attach:hover {
  color: var(--text);
  border-color: rgba(var(--wash-rgb), 0.16);
  background: rgba(var(--wash-rgb), 0.03);
}
.ig-attach svg { width: 14px; height: 14px; }

.ig-generate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 100%);
  color: var(--cyan-bg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.28),
    0 6px 16px -6px rgba(var(--accent-rgb),0.6);
  transition: transform 0.15s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.ig-generate:hover { transform: translateY(-1px); filter: brightness(1.05); }
.ig-generate:active { transform: translateY(0); }
.ig-generate:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}
.ig-generate svg { width: 15px; height: 15px; }

/* ── History ───────────────────────────────────────────────── */
.ig-history-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.ig-history-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
}
.ig-count {
  font-size: 12px;
  color: var(--muted-2);
}

.ig-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 18px;
  margin-top: 16px;
}
.ig-gallery:empty { display: none; }

.ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(var(--wash-rgb), 0.06);
  background: var(--panel-2);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  animation: ig-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ig-pop {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.ig-tile-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.45s ease;
}
.ig-tile:hover .ig-tile-img { transform: scale(1.05); }

/* Hover actions: view · download · use-as-reference, top-right of the tile. */
.ig-tile-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.ig-tile:hover .ig-tile-actions,
.ig-tile:focus-within .ig-tile-actions { opacity: 1; transform: none; }
.ig-act {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(var(--wash-rgb), 0.14);
  background: rgba(var(--dk14-rgb),0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text-6);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.ig-act:hover {
  background: rgba(var(--dk15-rgb),0.9);
  border-color: rgba(var(--wash-rgb), 0.3);
  transform: translateY(-1px);
}
.ig-act:disabled { opacity: 0.5; cursor: default; transform: none; }

/* "Made for <article>" badge: floats top-left on images generated for a
   content task. Links back to that article; the title is always cut to fit
   the tile width. */
.ig-tile-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  max-width: calc(100% - 16px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--r-chip);
  border: 1px solid rgba(var(--wash-rgb), 0.16);
  background: rgba(var(--dk14-rgb),0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text-6);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ig-tile-badge:hover {
  background: rgba(var(--dk15-rgb),0.92);
  border-color: rgba(var(--accent-rgb),0.55);
  color: #fff;
}

.ig-tile-badge svg { width: 12px; height: 12px; flex: 0 0 auto; opacity: 0.85; }
.ig-tile-badge-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: max-width 0.18s ease, opacity 0.14s ease, margin 0.18s ease;
}
/* On hover the title would grow to span the tile and paint over the top-right
   action icons (the badge sits above them). Collapse the label to nothing on
   hover so the badge shrinks to just its document icon — still a link back to
   the article — and the view/download/etc. icons are no longer covered. */
.ig-tile:hover .ig-tile-badge-label,
.ig-tile:focus-within .ig-tile-badge-label {
  max-width: 0;
  opacity: 0;
  margin-left: -5px;          /* reclaim the badge's icon→label gap */
}
.ig-act svg { width: 15px; height: 15px; }

/* No CSS tooltip here. `data-tip` is rendered by ONE owner —
   js/chip-tooltip.js into the fixed .cs-tip element on <body>. A
   `content: attr(data-tip)` pseudo-element renders a SECOND, identical
   tooltip on every page that also loads that script (all of them do), which
   is exactly the "two tooltips on one hover" bug. tools/check-shared-
   constants.sh fails if one reappears. */


/* Destructive action reads red on hover. */
.ig-act.is-danger:hover {
  background: var(--danger);
  border-color: transparent;
  color: #fff;
}

/* Styled tooltip — shows immediately on hover (no native title delay). Sits
   BELOW the icon so the tile's overflow:hidden doesn't clip it at the top. */
.ig-tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 13px;
  background: linear-gradient(180deg, transparent 38%, rgba(var(--dk17-rgb),0.88) 100%);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.ig-tile:hover .ig-tile-overlay { opacity: 1; }
.ig-tile-prompt {
  font-size: 12px;
  color: #fff;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ig-tile-time {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(var(--wash-rgb), 0.6);
}

/* Brief "generating" shimmer before the mock result resolves */
.ig-tile.is-loading { cursor: default; }
.ig-tile.is-loading .ig-tile-img {
  background: linear-gradient(110deg, var(--ctl-1) 28%, var(--ctl-4) 50%, var(--ctl-1) 72%);
  background-size: 220% 100%;
  animation: ig-shimmer 1.1s linear infinite;
}
.ig-tile.is-loading .ig-tile-overlay { display: none; }
@keyframes ig-shimmer {
  from { background-position: 220% 0; }
  to   { background-position: -220% 0; }
}
/* Reassuring caption over the shimmer (gallery + content placeholder both use
   .ig-tile.is-loading): generation runs in the background, so tell the user
   they don't have to wait on it. */
.ig-tile.is-loading::after {
  content: "Generating image…\A Feel free to do other things in the meantime";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  white-space: pre-line;
  text-align: center;
  padding: 16px;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  pointer-events: none;
}

/* Failed generation — muted red tile with the error in the overlay (always
   shown, not just on hover, so the user notices). */
.ig-tile.is-failed { cursor: default; border-color: rgba(255,122,122,0.32); }
.ig-tile.is-failed .ig-tile-img {
  background: linear-gradient(180deg, rgba(255,122,122,0.10), rgba(255,122,122,0.04));
}
.ig-tile.is-failed .ig-tile-overlay {
  opacity: 1;
  background: linear-gradient(180deg, transparent 30%, rgba(40,12,12,0.82) 100%);
}
.ig-tile.is-failed .ig-tile-time { color: #ff9a9a; }

/* Empty state */
.ig-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 0 34px;
  color: var(--muted-2);
}
.ig-empty[hidden] { display: none; }
.ig-empty-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(var(--wash-rgb), 0.03);
  border: 1px solid var(--line);
  color: var(--muted);
}
.ig-empty-icon svg { width: 22px; height: 22px; }
.ig-empty p { margin: 0; font-size: 13px; }

/* ── Inline viewer (lightbox) ──────────────────────────────── */
body.ig-viewer-open { overflow: hidden; }
.ig-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 40px;
  background: rgba(var(--dk17-rgb),0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: ig-viewer-in 0.18s ease;
}
.ig-viewer[hidden] { display: none; }
@keyframes ig-viewer-in { from { opacity: 0; } to { opacity: 1; } }
.ig-viewer-stage {
  display: flex;
  max-width: min(1100px, 92vw);
  max-height: 80vh;
}
.ig-viewer-stage img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8);
}
.ig-viewer-cap {
  max-width: min(820px, 88vw);
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lt22);
}
.ig-viewer-cap[hidden] { display: none; }
.ig-viewer-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(var(--wash-rgb), 0.14);
  background: rgba(var(--dk5-rgb),0.6);
  color: var(--text-6);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ig-viewer-close:hover { background: rgba(var(--dk18-rgb),0.85); border-color: rgba(var(--wash-rgb), 0.28); }
.ig-viewer-close svg { width: 18px; height: 18px; }

/* Copy-the-prompt button under the caption. Turns green on success so the
   user gets immediate confirmation without a separate toast. */
.ig-viewer-copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-chip);
  border: 1px solid rgba(var(--wash-rgb), 0.16);
  background: rgba(var(--dk5-rgb),0.6);
  color: var(--text-6);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ig-viewer-copy[hidden] { display: none; }
.ig-viewer-copy:hover { background: rgba(var(--dk18-rgb),0.85); border-color: rgba(var(--wash-rgb), 0.30); }
.ig-viewer-copy svg { width: 14px; height: 14px; }
.ig-viewer-copy.is-copied {
  color: var(--cyan-2);
  border-color: rgba(150,230,190,0.45);
  background: rgba(150,230,190,0.12);
}
.ig-viewer-copy.is-failed {
  color: var(--red-1);
  border-color: rgba(255,180,180,0.4);
}

/* Image-skill picker — a thumbnail glyph in the menu when the selected skill
   carries a reference photo, so it reads at a glance alongside the model and
   size chips. The chip + menu shell styles come from css/chat.css. */
.ig-skill-thumb {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
}

/* Large hover preview of a skill's reference image (js/image-skills.js), so the
   16px menu thumbnails are actually legible. Floated on <body>, follows the
   hovered row, never intercepts pointer events. Mirrors .vg-char-preview on the
   AI videos page. */
.ig-skill-preview {
  position: fixed;
  z-index: 1200;
  width: 200px;
  height: 200px;
  padding: 4px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(var(--glass-hi-rgb),0.98), rgba(var(--glass-lo-rgb),0.98));
  border: 1px solid rgba(var(--wash-rgb), 0.12);
  box-shadow: 0 20px 44px -14px rgba(0,0,0,0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.ig-skill-preview.visible { opacity: 1; }
.ig-skill-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
}

/* ── Mobile composer ─────────────────────────────────────────────────
   The toolbar is a space-between row (options on the left, Generate on the
   right). On a phone the four option chips don't fit beside the button, so
   they collide and the Generate button is pushed off-screen. Stack the
   toolbar: let the options wrap onto their own rows under the textarea, and
   put a full-width Generate button beneath them. */
@media (max-width: 768px) {
  .ig-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .ig-toolbar-left {
    flex-wrap: wrap;
    gap: 8px;
  }
  .ig-generate {
    width: 100%;
    justify-content: center;
    height: 42px;
  }
}