/* style — the busy veil, the trim pop-up, the matte picker.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- busy veil: heavy synchronous work (big clip reads) ---------- */
#busy-veil {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: rgba(8,8,10,.55); backdrop-filter: blur(2px);
}
#busy-veil.hidden { display: none; }
#busy-veil .bv-ring {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18); border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
#busy-veil .bv-cap { font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px var(--scrim-mid); }

/* Grabbed keyframes: one diamond on the bar per frame taken, so a model that
   holds several references shows where each of them came from. The layer is
   click-through; the diamonds on it are not. ✎ on a keyframe's card opens the
   AI image editor. */
.vtrim-kfms {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none; z-index: 3;
}
.vtrim-kfms .vtrim-kfm { pointer-events: auto; }
.vtrim-kfm {
  position: absolute; top: 50%; width: 11px; height: 11px; margin-left: -5.5px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--accent); border: 2px solid #fff; border-radius: 2px;
  cursor: pointer; z-index: 3; box-shadow: 0 0 6px var(--accent-glow);
}
/* Nothing left to grab into: still readable, plainly not pressable. */
.vtrim-btn:disabled { opacity: .45; cursor: default; }
/* A CROP IS A SETTING THAT SURVIVES THE PANEL BEING LOOKED AWAY FROM.

   Trim rewrites the file in the slot, so you can see it worked — the clip is
   shorter. A crop is applied on the way out, so between drawing the box and
   pressing Generate there is nothing on screen that says the next generation
   will be cut. The button carries it: lit, and reading back the size it will
   send, so it cannot be forgotten and blamed on the model. */
.vtrim-btn.on {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.vtrim-btn.on:hover { filter: brightness(1.12); }
/* AI-edit pencil sits square, immediately left of the delete button */
.slot-card .rm.kedit {
  top: 5px; right: 36px; left: auto; bottom: auto;
  width: 26px; height: 26px; border-radius: 3px; font-size: 13px;
  background: var(--scrim-mid); display: inline-flex; align-items: center; justify-content: center;
}
.slot-card .rm.kedit:hover { background: var(--accent); }
/* push-to-gallery sits left of the pencil */
.slot-card .rm.kpush {
  top: 5px; right: 67px; left: auto; bottom: auto;
  width: 26px; height: 26px; border-radius: 3px;
  background: var(--scrim-mid); display: inline-flex; align-items: center; justify-content: center;
}
.slot-card .rm.kpush:hover { background: var(--accent); }
.slot-card .rm.kpush svg { display: block; }

/* ---------- Trim pop-up ---------- */
#trimmod {
  position: fixed; inset: 0; z-index: var(--z-rail);
  background: var(--chrome-blur-bg);
  display: flex; flex-direction: column; padding: 12px;
}
.tm-stage {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  background: #000; border-radius: 3px; overflow: hidden;
}
.tm-stage video { max-width: 100%; max-height: 100%; cursor: pointer; }
.tm-bar { margin-top: 10px; }

/* generating card: when the job has an input image it becomes the card's
   background — blurred and toned right down, replacing the animated gradient —
   so a glance tells you what's being made. */
.pend-blur.src {
  background-size: cover; background-position: center; background-repeat: no-repeat;
  animation: none;
  filter: blur(4px) brightness(.66) saturate(.9);
  transform: scale(1.06);   /* hide the blur's soft edges */
}

/* ---------- inline matte picker (VFX point models) ---------- */
.mattepick .mp-stage {
  position: relative; min-height: 120px; background: #000;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; overflow: hidden;
}
/* the raw video shows greyed-out underneath while the first frame is grabbed */
.mattepick .mp-vid {
  width: 100%; display: block; background: #000;
  filter: brightness(.35) saturate(.5);
}
.mattepick .mp-stage.ready .mp-vid { display: none; }
.mattepick .mp-canvas {
  width: 100%; display: none; background: #000; cursor: crosshair;
}
.mattepick .mp-stage.ready .mp-canvas { display: block; }
.mattepick .mp-loading {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.mattepick .mp-stage.ready .mp-loading { display: none; }
.mattepick .mpl-ring {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.2); border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
.mattepick .mp-lcap { font-size: 10px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px var(--scrim-heavy); }
.mattepick .mp-note {
  font-size: 9.5px; color: var(--text-dim); padding: 5px 8px 2px; line-height: 1.4;
}