/* style — the 16:9 cap, precomp popup and gallery mode banner.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- gallery 16:9 hard cap ---------- */
/* aspect-ratio guarantees thumbs never render wider (flatter) than 16:9,
   even where the padding-top fallback misbehaves. */
.gal-item .gthumb { aspect-ratio: 16 / 9; padding-top: 0; height: auto; }
#gallery .gal-item { max-width: 100%; }

::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }
/* `width` above sets a vertical scrollbar's thickness; a horizontal one is
   sized by `height` instead, and nothing in the app scrolled sideways
   until the generation row did (see #gallery-pending, 15-layout.css) --
   so it never needed one before. Scoped rather than global so this only
   ever styles that one row's own bar, not any future horizontal scroll
   nobody has reasoned about yet. */
#gallery-pending::-webkit-scrollbar { height: 7px; }

/* AND THE DRAG-CORNER, because the three rules above took it away.

   Simon: "if the prompt box is smaller than the text, a different square gray
   icon appears in the bottom right-hand corner." Declaring ::-webkit-scrollbar
   anywhere at document level opts the whole document into custom scrollbar
   painting, and ::-webkit-resizer is part of that same furniture -- so the
   native diagonal grip stops being drawn and Chromium falls back to a flat
   grey block. It only shows up once a box is short enough to scroll, which is
   why it reads as an icon that appears rather than a control that changed.

   So draw it ourselves, and draw it the same whether the box is scrolling or
   not: two hairline ticks, transparent behind, in the same grey as the
   scrollbar thumb. */
::-webkit-resizer {
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M9 3L3 9M9 6.5L6.5 9' stroke='%23343434' stroke-width='1.25' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1px bottom 1px;
}

/* ---------- Inverse Precomp popup ---------- */
/* The launcher is #ip-btn, now the last button in the rail — it spent its life
   floating bottom-left, which is where the rail is, so the rail (z-index 210
   against its 60) quietly ate every click. Drawn-but-dead is the worst version
   of broken: nothing looks wrong, so you blame the tool rather than the button.
   In the rail it is a .rail-btn like the rest and there is nothing to sit under.

   The panel opens beside the rail, never behind it; main.js pins its top to the
   button so the two read as one thing. z-index is above the rail's 210 because
   the rail is what opens it. */
#ipmod {
  position: fixed; left: 52px; top: calc(var(--hdr-h, 50px) + 8px); z-index: 230; width: 260px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
#ipmod .ip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#ipmod .ip-title { font-size: 12px; font-weight: 700; letter-spacing: .4px; }
#ipmod .ip-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
#ipmod .ip-row span { font-size: 11px; color: var(--text-dim); }
#ipmod .ip-row input { width: 76px; }
/* Same width as the number field beside it, so the two rows line up and
   the panel does not step in and out down its right edge. */
#ipmod .ip-row select {
  width: 118px; font: inherit; font-size: 11px; padding: 3px 24px 3px 6px;
  color: var(--text); background-color: var(--card, #1c1c21);
  border: 1px solid var(--line, #33333a); border-radius: 3px;
}
/* Two-up segmented control — same shape as the batch view's function picker,
   so a pair of mutually exclusive answers looks the same everywhere. */
#ipmod .ip-seg {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
}
#ipmod .ip-seg button {
  border: none; background: none; border-radius: 3px; cursor: pointer;
  color: var(--text-dim); font-family: inherit; font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; line-height: 1.3;
}
#ipmod .ip-seg button:hover { color: var(--text); background: var(--card-hover, #26262c); }
#ipmod .ip-seg button.on, #ipmod .ip-seg button.on:hover { background: var(--accent); color: #fff; }
#ipmod .ip-hint { color: var(--text-faint); font-size: 10px; line-height: 1.5; margin: 10px 0 0; }

/* ---- Gallery mode banner (Inputs / Elements / 3D) ------------------ */
#gallery-scroll { position: relative; }
#gal-mode-banner {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; margin-bottom: 8px;
  border-radius: var(--radius-sm);
  font-size: 11px; letter-spacing: .4px;
  border: 1px solid var(--border);
  background: var(--card);
}
#gal-mode-banner strong { font-size: 11px; font-weight: 800; letter-spacing: 1px; }
#gal-mode-banner .gmb-sub { color: var(--text-dim); font-weight: 500; letter-spacing: .2px; }
#gal-mode-banner .gmb-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
#gal-mode-banner .gmb-exit {
  margin-left: auto; flex: none; cursor: pointer;
  background: rgba(255,255,255,.06); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 3px 9px; font-size: 10px; font-weight: 700; white-space: nowrap;
}
#gal-mode-banner .gmb-exit:hover { color: #fff; }

/* Inputs = cyan, so it never reads as the pink generations grid */
#gal-mode-banner.ban-inputs {
  border-color: rgba(34,211,238,.55);
  background: linear-gradient(90deg, rgba(34,211,238,.16), rgba(34,211,238,.05));
}
#gal-mode-banner.ban-inputs strong { color: var(--cyan); }
#gal-mode-banner.ban-inputs .gmb-dot { background: var(--cyan); box-shadow: 0 0 8px rgba(34,211,238,.8); }
/* 3D proxy = amber, the hue of Create's 3D group */
#gal-mode-banner.ban-proxy3d {
  border-color: rgba(255,176,74,.55);
  background: linear-gradient(90deg, rgba(255,176,74,.16), rgba(255,176,74,.05));
}
#gal-mode-banner.ban-proxy3d strong { color: #ffb04a; }
#gal-mode-banner.ban-proxy3d .gmb-dot { background: #ffb04a; box-shadow: 0 0 8px rgba(255,176,74,.8); }
#gallery-pane.mode-proxy3d { box-shadow: inset 0 0 0 2px rgba(255,176,74,.45); border-radius: var(--radius-sm); }
.gal-item .gal-proxy-badge { background: rgba(255,176,74,.9); color: #1a1000; }
.gal-item .gal-draft-badge { background: rgba(255,200,80,.92); color: #1a1000; }
.gal-item .gal-hdr-badge { background: rgba(120,200,255,.92); color: #001526; }
/* The camera description under the still, three lines at most. */
.gal-item .gal-proxy-cam {
  padding: 4px 8px 6px; font-size: 9.5px; line-height: 1.35; color: var(--text-dim);
  white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
#gal-mode-banner.ban-elements { border-color: var(--border-dash); }
#gal-mode-banner.ban-elements strong, #gal-mode-banner.ban-elements .gmb-dot { color: var(--accent); }
#gal-mode-banner.ban-elements .gmb-dot { background: var(--accent); }
#gal-mode-banner.ban-3d strong { color: #a78bfa; }
#gal-mode-banner.ban-3d .gmb-dot { background: #a78bfa; }

/* PICK A PICTURE — amber, because it is the one banner that means "the app is
   waiting on you" rather than "this is the folder you are in", and it must not
   be mistaken for either of the two that do. */
#gal-mode-banner.ban-charpick {
  border-color: rgba(245,180,60,.6);
  background: linear-gradient(90deg, rgba(245,180,60,.18), rgba(245,180,60,.05));
}
#gal-mode-banner.ban-charpick strong { color: var(--warn-deep); }
#gal-mode-banner.ban-charpick .gmb-dot { background: var(--warn-deep); box-shadow: 0 0 8px rgba(245,180,60,.8); }

/* Every picture is a button while the pick is armed. */
.gal-item.charpick { outline: 2px solid rgba(245,180,60,.45); outline-offset: -2px; cursor: pointer; }
.gal-item.charpick:hover { outline-color: var(--warn-deep); }
/* The hover strip's own actions would each be a different answer to a click
   that currently has exactly one meaning. */
.gal-item.charpick .gal-actions,
.gal-item.charpick .gal-actions-w { display: none !important; }
.charpick-cap {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 6; pointer-events: none; white-space: nowrap;
  background: var(--warn-deep); color: #241701;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  padding: 4px 9px; border-radius: 3px;
  opacity: 0; transition: opacity .12s ease;
}
.gal-item.charpick:hover .charpick-cap { opacity: 1; }

/* Whole pane picks up a cyan frame in the Inputs view */
#gallery-pane.mode-inputs { box-shadow: inset 0 0 0 2px rgba(34,211,238,.45); border-radius: var(--radius-sm); }
#gallery-pane.mode-inputs .gfilter button.gf-inputs {
  background: var(--cyan); color: #04252b; border-color: var(--cyan);
}

/* Per-tile badge in the Inputs view */
.gal-item.is-input { outline: 1.5px solid rgba(34,211,238,.55); outline-offset: -1.5px; }
.gal-item.is-input:hover { border-color: var(--cyan); }
.gal-input-badge {
  position: absolute; top: 5px; left: 5px; z-index: 5;
  background: var(--cyan); color: #04252b;
  font-size: 9px; font-weight: 800; letter-spacing: .6px;
  padding: 2px 6px; border-radius: 3px; pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}