/* style — the full-panel gallery lightbox.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- Full-panel gallery lightbox (single-click a generation) ---------- */
/* IN FRONT OF EVERYTHING, WHICH IS WHAT A FULL PREVIEW IS FOR.

   Simon: "When the viewer is inactive, so I can select any images or videos
   and view in high res, the tabs remain on top of everything. This modal
   window should be at the front, so we can't see anything else other than
   what we see in this modal window when it's selected."

   It was --z-drawer (200) -- the same number as the header, which holds the
   tabs. Equal z-index is decided by document order, and the header is
   written after this in index.html, so the tabs won every time. The rail is
   210 and beat it outright.

   --z-modal is where this belongs and the token has said so all along: its
   own comment reads "trim window, image editor, full preview". The offset in
   30-gallery-states.css that kept it clear of the rail comes off with it --
   that was written so the rail stayed reachable behind a viewer, and what
   Simon is asking for is the opposite: one picture, nothing else. Esc and
   the close button are how you come back, the same as they already were.

   Deliberately below --z-toast (950), so a message that has to be readable
   over a modal still is. */
#gallery-lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal); display: flex;
  background: rgba(8,8,10,.94); backdrop-filter: blur(6px);
}
#gallery-lightbox.hidden { display: none; }
#glb-stage {
  flex: 1 1 auto; min-width: 0; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: default;   /* standard cursor — no magnifier */
}
#glb-stage.zoomed { cursor: grab; }
#glb-stage.zoomed:active { cursor: grabbing; }
#glb-stage .glb-media {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
  transform-origin: center center;
  /* NO will-change, NO transition. Simon, 22 Sep: zooming in "doesn't show
     you the full-resolution image ... it's only when you disrupt the viewer
     that you actually see the full-res image." will-change: transform tells
     Chromium to rasterise the picture once, at the size it was laid out
     (fit to the stage), and scale that bitmap on every zoom -- so a 6K file
     at 4x was a 1200px raster blown up. Without it the picture is redrawn
     at the zoom it is shown at. */
}
/* A small, quiet wheel while the full-resolution file is still coming in. */
#glb-stage .glb-spin {
  position: absolute; right: 14px; bottom: 14px; width: 16px; height: 16px; z-index: 3;
  border: 2px solid rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.7); border-radius: 50%;
  animation: glb-spin .8s linear infinite; pointer-events: none;
}
@keyframes glb-spin { to { transform: rotate(360deg); } }
#glb-info {
  flex: 0 0 258px; width: 258px; overflow-y: auto;
  background: var(--card); border-left: 1px solid var(--border);
  padding: 16px 15px 22px; display: flex; flex-direction: column; gap: 16px;
}
.glb-sec h4 {
  margin: 0 0 6px; font-size: 9px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-faint);
}
/* The heading and its one small button on a line -- Copy, for the prompt.
   Same shape as .prompt-detect in the classic column: a quiet pill that goes
   brand-coloured under the pointer. */
.glb-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.glb-sec-head h4 { margin: 0; }
.glb-mini {
  font-size: 9.5px; font-weight: 600; letter-spacing: .3px;
  padding: 2px 8px; border-radius: 3px; cursor: pointer; font-family: inherit;
  background: var(--bg); color: var(--text-dim); border: 1px solid var(--border-dash);
}
.glb-mini:hover { color: #fff; border-color: var(--accent); background: var(--accent); }
.glb-mini.hidden { display: none; }
.glb-prompt {
  margin: 0; font-size: 12px; line-height: 1.5; color: var(--text);
  white-space: pre-wrap; word-break: break-word; user-select: text;
}
/* The words as typed, under the enhanced ones that were sent (recipe.originalPrompt). */
.glb-prompt-orig { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border, #333); color: var(--text-dim); }
.glb-prompt-orig .k { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.glb-prompt-orig.hidden { display: none; }
.glb-model { margin: 0; font-size: 12px; font-weight: 600; color: var(--accent); }
#glb-settings { display: flex; flex-direction: column; gap: 4px; }
.glb-set-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; line-height: 1.4;
}
.glb-set-row .k { color: var(--text-dim); }
.glb-set-row .v { color: var(--text); font-weight: 600; text-align: right; word-break: break-word; }
#glb-actions-sec { margin-top: auto; }   /* pin actions to the bottom-right */
#glb-actions { display: flex; flex-direction: column; gap: 6px; }
.glb-act {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border-radius: 3px; cursor: pointer;
  background: var(--card-hover); border: 1px solid var(--border);
  color: var(--text); font-size: 11.5px; font-weight: 600; text-align: left;
}
.glb-act:hover { border-color: var(--accent); background: #232327; }
.glb-act svg { width: 15px; height: 15px; flex: none; color: var(--text-dim); }
.glb-act:hover svg { color: var(--accent); }
.glb-act .glb-act-sub { color: var(--text-faint); font-weight: 500; font-size: 10px; }

#glb-close {
  position: absolute; top: 12px; right: 272px; z-index: 2;
  width: 34px; height: 34px; font-size: 22px; line-height: 1;
  background: var(--scrim); border: 1px solid var(--border); border-radius: 3px;
}
@media (max-width: 560px) {
  #gallery-lightbox { flex-direction: column; }
  #glb-info { flex: 0 0 auto; width: auto; max-height: 40%; border-left: none; border-top: 1px solid var(--border); }
  #glb-close { right: 12px; }
}
/* compact project dropdown in the header (top-right) */
#hdr-project {
  position: relative; display: flex; align-items: center; gap: 5px;
  background: var(--card); border: 1px solid var(--border); border-radius: 3px;
  padding: 3px 4px 3px 9px; margin-right: 4px;
  cursor: pointer;   /* the whole pill toggles the project menu */
}
#hdr-project:hover { background: var(--card-hover); }
.hdr-proj-label {
  font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-faint); flex: none;
}
#proj-dd { position: relative; }
#proj-dd-btn {
  display: flex; align-items: center; gap: 6px; max-width: 150px;
  padding: 3px 8px; font-size: 11px; font-weight: 600; color: var(--text);
  background: transparent; border: none; border-radius: 3px; cursor: pointer;
}
#proj-dd-btn:hover { background: var(--card-hover); }
#proj-dd-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 118px;
}
.pd-chev { font-size: 9px; color: var(--text-faint); flex: none; }
#proj-dd-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-sticky);
  min-width: 190px; max-height: 260px; overflow-y: auto;
  padding: 4px; border-radius: 3px;
  background: #141416; border: 1px solid var(--border-dash);
  box-shadow: 0 10px 28px var(--scrim);
}
.pd-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 3px; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--text);
}
.pd-row:hover { background: var(--card-hover); }
.pd-row.active { color: var(--accent); }
.pd-row .pd-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pd-del {
  flex: none; display: none; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: none; border-radius: 3px;
  background: transparent; color: var(--text-faint); cursor: pointer;
}
.pd-del svg { width: 12px; height: 12px; }
.pd-row:hover .pd-del { display: flex; }
.pd-del:hover { color: #ff5d73; background: rgba(255,93,115,.12); }
.pd-row.pd-new {
  margin-top: 3px; border-top: 1px solid var(--border);
  border-radius: 0 0 3px 3px; color: var(--text-faint); font-weight: 600;
}
.pd-row.pd-new:hover { color: var(--text); }
.pd-plus { font-size: 12px; flex: none; }
.pd-input {
  width: calc(100% - 8px); margin: 4px; padding: 6px 8px;
  font-size: 11px; border-radius: 3px;
  background: var(--card); border: 1px solid var(--border-dash); color: var(--text);
}
/* video-edit player: centered loading wheel while the clip decodes */
.vtrim { position: relative; }
.vtrim-loading {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  pointer-events: none; z-index: 3;
}
/* pink diamond on the Keyframe button — matches the bar's keyframe marker */
.kf-dia { color: var(--accent); font-size: 8px; margin-right: 5px; vertical-align: 1px; }