/* style — the AI keyframe / image editor overlay.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- AI keyframe / image editor overlay ---------- */
#kfedit {
  position: fixed; inset: 0; z-index: var(--z-rail);
  background: var(--chrome-blur-bg);
  display: flex; flex-direction: column; padding: 12px;
}
.kfe-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.kfe-x {
  width: 26px; height: 26px; flex: none; border: none; border-radius: 3px;
  background: transparent; color: var(--text-dim); font-size: 18px; line-height: 1;
  cursor: pointer;
}
.kfe-x:hover { background: var(--card-hover); color: var(--text); }
/* single-image stage — the working image fills the space, spinner overlays it */
.kfe-stage {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-dash); border-radius: 3px; background: #000;
  overflow: hidden; position: relative;
}
.kfe-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.kfe-busy {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--scrim-light);
}
/* Spinner inside the AI-edit modal — the .mpl-ring style was previously only
   scoped to .mattepick, so this overlay showed a dark box with no spinner. */
.kfe-busy .mpl-ring {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.22); border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
/* two-column layout: controls (prompt / model / reference / actions) on the
   left, the working image on the right — a simplified edit panel in-modal */
.kfe-cols { flex: 1; min-height: 0; display: flex; gap: 12px; }
.kfe-side {
  flex: 0 0 270px; min-width: 0; display: flex; flex-direction: column; gap: 7px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 3px; padding: 10px;
  overflow-y: auto;
}
.kfe-side .field-label { margin: 0; }
.kfe-side textarea { resize: vertical; min-height: 72px; }
.kfe-side select { width: 100%; }
.kfe-side .hint { margin: 2px 0 0; flex: 1; }
.kfe-btns { display: flex; gap: 7px; margin-top: auto; }
.kfe-btns .btn { flex: 1 1 0; }
/* reference slot — same card language as the main input slots */
#kfe-refbox { display: flex; }
.kfe-refcard {
  position: relative; width: 64px; height: 64px; border-radius: 3px;
  overflow: hidden; background: var(--bg); border: 1px solid var(--border);
  /* A fixed 64px square: it is a .slot-card too, and that class grows and
     caps at half its row for the reference rows. Not here. */
  flex: none; max-width: none; aspect-ratio: auto;
}
.kfe-refcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kfe-refempty {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border-dash); cursor: pointer;
  color: var(--text-faint); font-size: 16px;
}
.kfe-refempty:hover { border-color: var(--accent); color: var(--text); }
/* exposed model settings — same look + behaviour as the main panel (#fields) */
#kfe-fields { display: flex; flex-wrap: wrap; gap: 6px; }
#kfe-fields .img-toolbar { margin-top: 0; flex: 1 1 100%; }
#kfe-fields .field {
  flex: 1 1 calc(50% - 3px); min-width: 96px; margin: 0;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 10px 7px;
}
#kfe-fields .field .field-label {
  margin-bottom: 3px; letter-spacing: 0.6px; font-size: 9px; color: var(--text-faint);
}
#kfe-fields .field select, #kfe-fields .field input[type=text], #kfe-fields .field input[type=number] {
  background-color: transparent; border: none; padding: 0; border-radius: 0; font-weight: 600;
}
#kfe-fields .field.selwrap {
  position: relative; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; cursor: pointer;
  height: var(--ctl-h); padding: 0 10px; box-sizing: border-box;
}
#kfe-fields .field.selwrap:hover { background: var(--card-hover); }
#kfe-fields .field.selwrap .field-label { margin: 0; pointer-events: none; text-transform: uppercase; white-space: nowrap; }
#kfe-fields .field.selwrap .sel-value {
  display: flex; align-items: center; gap: 8px; pointer-events: none;
  font-size: 11px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The one chevron every dropdown in the app wears -- see 10-form.css. */
#kfe-fields .field.selwrap .sel-chev {
  flex: none; width: 10px; height: 6px; font-size: 0; line-height: 0; color: transparent;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%239a9aa2' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat center;
}
/* The toolbar's field pills, in the editor's own darker card colour. */
#kfe-fields .img-toolbar .field.selwrap { background: var(--bg); border-radius: var(--radius-sm); }
#kfe-fields .field.selwrap select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; margin: 0; padding: 0; border: 0;
  background-image: none; -webkit-appearance: none; appearance: none;
}
/* THE SWITCH SITS BESIDE ITS WORDS, NOT AT THE FAR EDGE. Simon: "Make it so
   the 'Keep the original audio' toggle is better designed, so the toggle is
   aligned to be just to the right of the text. Currently, I'm looking at it
   in Kling 03 Edit, and the toggle is over to the right, but the text is over
   to the left."

   It was space-between, which is the right rule for a full-width row and the
   wrong one here: these rows are half the card wide and the labels are short,
   so the pair read as two unrelated controls with a hole between them, and on
   a wide panel the hole grew. flex-start puts the 8px gap between the label
   and the switch and nothing after them, so a row reads as one thing.

   Both rooms, because it is one control: a toggle that looks different in the
   image editor than on the model card is the next report. */
#kfe-fields .toggle-row {
  flex: 1 1 calc(50% - 3px); display: flex; align-items: center; justify-content: flex-start;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 10px 7px; gap: 8px;
}
#kfe-fields .toggle-row label { color: var(--text); font-weight: 600; font-size: 11px; flex: 0 1 auto; }
#kfe-fields .slider-row {
  flex: 1 1 100%; display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 10px 7px;
}
.kfe-ref { display: flex; align-items: center; flex: none; }
.kfe-ref-btn {
  padding: 5px 10px; font-size: 11px; font-weight: 600; color: var(--text-dim);
  background: var(--card); border: 1px dashed var(--border-dash); border-radius: 3px; cursor: pointer;
}
.kfe-ref-btn:hover { color: var(--text); border-color: var(--accent); }
.kfe-ref-wrap { position: relative; display: inline-flex; }
.kfe-ref-wrap img {
  width: 34px; height: 34px; object-fit: cover; border-radius: 3px;
  border: 1px solid var(--border);
}
.kfe-ref-wrap button {
  position: absolute; top: -6px; right: -6px; width: 16px; height: 16px;
  border: none; border-radius: 50%; background: #ff5d73; color: #fff;
  font-size: 11px; line-height: 1; cursor: pointer;
}