/* style — drag and drop.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- drag & drop ---------- */
.slot-card.dragover { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
.slot-card.filled { cursor: grab; }
/* ▦ frame-picker button on frames grabbed from a video — bottom-right corner */
.slot-card .rm.pick {
  top: auto; bottom: 4px; font-size: 0;
  display: flex; align-items: center; justify-content: center;
}
/* ✎ annotate — bottom LEFT, opposite the frame picker, so a still grabbed from
   a video can carry both without either moving. */
.slot-card .rm.anno {
  top: auto; bottom: 4px; left: 4px; right: auto; font-size: 0;
  background: rgba(0, 0, 0, .62);
  display: flex; align-items: center; justify-content: center;
}
.slot-card .rm.anno:hover { background: var(--accent); }
.slot-card .rm.anno svg { display: block; }
/* The globe — bottom left, one button right of the pencil: the 3D proxy
   room on this picture (13b makeFilledCard). Same round, same scrim. */
.slot-card .rm.globe {
  top: auto; bottom: 4px; left: 24px; right: auto; font-size: 0;
  background: rgba(0, 0, 0, .62);
  display: flex; align-items: center; justify-content: center;
}
.slot-card .rm.globe:hover { background: var(--accent); }
/* A notch under the pencil beside it, and off full white -- see the
   .pv-planet rule in js/panel/12c-previz-modal.js for why. */
.slot-card .rm.globe svg { display: block; width: 10px; height: 10px; }
.slot-card.filled:active { cursor: grabbing; }

/* THE PLANET, wherever it is drawn -- one class, so the button on a classic
   card, the one in an empty reference slot and the one on a Create box are
   the same button (js/panel/13b-model-card-render.js, 18-input-slots.js).

   HERE RATHER THAN IN THE MODAL'S OWN STYLE BLOCK, which is where it was:
   that block is written when the 3D builder is first opened, so on a fresh
   panel the globe in an empty slot had no rule at all and drew at its
   intrinsic size in full white -- a head taller and several steps louder
   than the star beside it, which is exactly what Simon kept seeing.

   Simon: "Slightly reduce the Build the shot in 3D button and make it so the
   colour of the icon isn't as bright a white. It's slightly dark grey." The
   star next to it is a 8px accent mark; the globe is the same kind of thing
   and should carry the same weight, so it comes down to 9.5px on --text-dim.
   Hover still takes it to full white, because that is the moment it IS the
   loudest thing on the thumbnail. */
.pv-planet svg { width: 9.5px; height: 9.5px; display: block; color: var(--text-dim); }
.pv-planet:hover svg { color: #fff; }

/* ---------- @ mention popup ---------- */
#prompt-wrap { position: relative; }
#mention-pop {
  position: absolute; left: 8px; right: 8px; bottom: 100%; margin-bottom: 5px; z-index: 20;
  background: var(--card); border: 1px solid var(--border-dash); border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.mention-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 10px; background: none; border: none; cursor: pointer;
  color: var(--text); font-size: 11px; text-align: left;
}
.mention-item:hover, .mention-item.sel { background: var(--accent-soft); }
/* Simon: "make that the same branded pink color rather than the blue it
   currently is" — this token preview is the same @Image1/@Sarah text the
   prompt itself turns pink the instant it resolves (.pm-ref, both mirrors);
   var(--blue) here made the menu preview a different colour from the thing
   it was a preview OF. */
.mention-item .tok { color: var(--accent); font-family: "Geist Mono", Consolas, monospace; font-weight: 600; }
.mention-item .fname { color: var(--text-faint); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The preview: the row is the picture plus its name, so picking a reference
   is recognition rather than recall. */
.mention-item .mthumb {
  flex: none; width: 40px; height: 30px; border-radius: 3px; overflow: hidden;
  background: #000; border: 1px solid var(--border); display: block;
}
.mention-item .mthumb img, .mention-item .mthumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.mention-item .mtok {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1;
}
#mention-pop { max-height: 268px; overflow-y: auto; }
/* SERVING A NODE'S PROMPT INSTEAD.

   The menu is re-parented to <body> and placed by script when the box it is
   answering for is on a node — the node canvas is a full-screen layer over
   this panel, so the rule above would open it behind the graph. Fixed rather
   than absolute because the canvas scrolls and zooms under it and the box's
   screen position is the only one that stays true. */
#mention-pop.at-node {
  position: fixed; left: auto; right: auto; bottom: auto; margin: 0;
  z-index: 2147482000;
}

/* ---------- 16:9 letterboxed gallery thumbs ---------- */
.gal-item .gthumb {
  position: relative; width: 100%; padding-top: 56.25%;
  background: #1d1d20;
}
.gal-item .gthumb img, .gal-item .gthumb video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: contain;
}