/* style — frame picker and annotation editor.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- frame picker ---------- */
/* FULL-WINDOW SURFACES STAND OVER THE PANE TABS AND THE SEAMS. Simon, on
   the character box: "you can still see the tabs from the interface
   underneath, and you can still hover to adjust the width of sections.
   The modal window needs to fully overlay the screen." #pa-tabs and the
   .nle-grip seams are fixed at --z-menu (300) so they clear every pane;
   these three sat under that. Same tier as #reflib now: just over the
   menus, under the modals and toasts (900, 950). */
#framepick {
  position: fixed; inset: 0; z-index: calc(var(--z-menu) + 10);
  background: var(--chrome-blur-bg);
  display: flex; flex-direction: column; padding: 12px;
}
#fp-wrap {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
}
/* THE SCRUBBER UNDER THE PICTURE (Simon, 29 Sep: "adjust the position of the
   timeline scrubber for picking a frame ... so the timeline sits just below
   the image preview itself" -- "centrally aligned just below the actual
   video box in the middle of the modal window"). The video and its scrub
   bar are one block, shrink-wrapped to the video and centred together; the
   bar used to run the full width of the window at its very bottom. The
   video's height leaves room for the bar and the footer. */
#fp-stage {
  display: flex; flex-direction: column; align-items: stretch;
  max-width: 100%; max-height: 100%; min-height: 0;
}
#fp-video {
  display: block; max-width: 100%;
  max-height: calc(100vh - var(--hdr-h, 50px) - 120px);
  border: 1px solid var(--border-dash); border-radius: 3px; background: #000;
}
.fp-controls { display: flex; align-items: center; gap: 10px; margin-top: 10px; min-width: 260px; }
.fp-controls input[type=range] { flex: 1; }
#fp-time { font-size: 11px; font-weight: 700; min-width: 52px; text-align: right; }

/* ---------- add a character from nothing ---------- */
/* Centred rather than full-bleed like the two below it: this is a box that
   asks one question, and a full-screen sheet for one textarea reads as a
   mode you have to get back out of. Above #ndmod (150) and below the rail
   (210), on the same reasoning as the annotation editor. */
#charnew, #charvoice {
  position: fixed; inset: 0; z-index: calc(var(--z-menu) + 10);
  background: var(--chrome-blur-bg);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* THE MAKE PANEL'S OWN PIECES, in a card. */
#cn-card, #cv-card {
  width: min(460px, 100%); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5); overflow: hidden;
  display: flex; flex-direction: column;
}
.cn-head { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.cn-head .sec-title { margin: 0; flex: 1; }
#cn-card .cn-slot, #cv-card .cn-slot { margin: 12px 14px 0; background: #131315; border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 12px 12px; }
#cn-card .cn-slot > .sec-title, #cv-card .cn-slot > .sec-title { margin: 0 0 8px; }
.cn-opt { text-transform: none; font-weight: 400; letter-spacing: 0; color: var(--text-faint); }
.cn-namerow {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-ctl, 3px);
  padding: 0 10px; height: var(--ctl-h, 36px);
}
.cn-namerow span { color: var(--accent); font-weight: 700; }
.cn-namerow input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: inherit; font-size: 12px; }
.cn-namerow:focus-within { border-color: var(--accent); }
.cn-drop { position: relative; }
.cn-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.cn-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cn-drop .cn-x { position: absolute; top: 6px; right: 6px; z-index: 3; width: 24px; height: 24px; border-radius: 3px; border: 1px solid var(--border); background: var(--scrim-mid); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
.cn-drop .cn-x:hover { background: var(--red); border-color: var(--red); }
#cn-text, #cv-card .cv-text, #cv-card .cv-line {
  width: 100%; min-height: 84px; resize: vertical; box-sizing: border-box;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 11px; font: inherit; font-size: 12px; line-height: 1.5;
}
#cn-text:focus, #cv-card .cv-text:focus, #cv-card .cv-line:focus { outline: none; border-color: var(--accent); }
/* THE PICTURES, IN THE CARD. See cnOpenPick in panel/39b-ab-video.js.
   Capped in height rather than left to grow: the card is centred in the
   window and a grid of ninety would push Create character off the bottom of
   the screen, which is the one control that has to stay reachable. */
#cn-pick {
  margin: 8px 14px 0; max-height: 46vh; overflow: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 6px;
  background: var(--card);
}
#cn-pick.hidden { display: none; }
.cn-pick-tile {
  padding: 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
  background: var(--surface-sunk); cursor: pointer; aspect-ratio: 1; line-height: 0;
}
.cn-pick-tile:hover { border-color: var(--accent); }
.cn-pick-tile img { width: 100%; height: 100%; object-fit: cover; }
.cn-pick-none { grid-column: 1 / -1; margin: 0; padding: 14px 10px; text-align: center;
  color: var(--text-faint); font-size: 11.5px; }

.cn-foot { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.cn-foot .btn.big { width: 100%; }
.cn-cost { font-size: 10.5px; color: var(--text-faint); text-align: right; }
/* The model picker, on one line above the button. Built like .cn-namerow so
   the two controls in this card are the same object at two widths, and
   shorter than the name row because it is a setting rather than a field you
   type in. */
.cn-modelrow {
  display: flex; align-items: center; gap: 8px;
  background: #131315; border: 1px solid var(--border); border-radius: var(--radius-ctl, 3px);
  padding: 0 4px 0 10px; height: 32px; margin-bottom: 2px;
}
.cn-modelrow > span {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--text-faint); flex: none;
}
/* background-COLOR, not the `background` shorthand: the chevron every other
   select in the app wears is a background-image on the bare `select` rule
   (css/style/10-form.css), and the shorthand wipes it. A dropdown with no
   arrow reads as a label. */
.cn-modelrow select {
  flex: 1; min-width: 0; height: 100%;
  background-color: transparent; border: 0; outline: none; color: var(--text);
  font: inherit; font-size: 12px; cursor: pointer;
}
.cn-modelrow select option { background: var(--bg); color: var(--text); }
.cn-modelrow:focus-within { border-color: var(--accent); }

/* ---------- annotation editor ---------- */
/* ABOVE THE NODE SPACE. #ndmod is 150 and the rail is 210, so at the 100 this
   used to sit at the annotator opened underneath the workspace that opened it
   — invisible, and with the canvas swallowing every click. It is a full-screen
   modal: it goes above everything it can be opened from. */
/* A WINDOW, NOT THE WHOLE SCREEN. Simon, 21 Sep: "the modal window is so
   wide you can't really see it's a modal window." The backdrop dims what is
   behind; the card in the middle is the tool. */
#annotate {
  position: fixed; inset: 0; z-index: calc(var(--z-menu) + 10);
  background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.anno-card {
  width: min(880px, 92vw); height: min(760px, 86vh);
  display: flex; flex-direction: column; padding: 12px;
  background: var(--panel, #141418); border: 1px solid var(--border); border-radius: var(--radius, 6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.anno-promptrow { display: flex; gap: 8px; align-items: stretch; margin-top: 10px; }
.anno-promptrow textarea {
  flex: 1; min-height: 46px; resize: vertical; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius, 3px);
  color: var(--text); font-family: inherit; font-size: 12px; line-height: 1.45; padding: 7px 10px; outline: none;
}
.anno-promptrow textarea:focus { border-color: var(--accent); }
.anno-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.anno-tools, .anno-colors {
  display: flex; gap: 3px; align-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 3px; padding: 3px;
}
.anno-tool {
  width: 24px; height: 24px; border: none; border-radius: 3px; background: none;
  color: var(--text-dim); cursor: pointer; font-size: 12px; line-height: 1; padding: 0;
}
.anno-tool:hover { color: var(--text); }
.anno-tool.active { background: var(--accent); color: #fff; }
.anno-color {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0;
}
.anno-color.active { border-color: #fff; }
#anno-size { flex: none; width: 80px; }
#anno-canvas-wrap {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  overflow: auto;
}
#anno-canvas {
  max-width: 100%; max-height: 100%;
  background: #fff; border: 1px solid var(--border-dash); border-radius: 3px;
  cursor: crosshair;
}
.anno-foot { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.btn.small.primary { background: var(--accent); border: none; color: #fff; }
.slot-card .rm.edit { right: 22px; background: rgba(0, 0, 0, .62); }
.slot-card .rm.edit:hover { background: var(--blue); }

/* Third action button on image cards (AI edit) */
.slot-card .rm.ai { right: 41px; background: rgba(0, 0, 0, .62); }
.slot-card .rm.ai:hover { background: var(--accent); }
/* The person in the character-reference slot: the tile's own glyph at slot size. */
.cn-drop .cn-person svg { width: 22px; height: 22px; opacity: .7; }

/* THE ADD VOICE WINDOW (34f-voice-modal.js): the New character card, with a
   choice of two before Seed Audio's box. */
#cv-card .cv-line { min-height: 0; height: 34px; }
#cv-card .cv-choose { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
#cv-card .cv-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  padding: 12px 14px; background: #131315; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font: inherit; cursor: pointer; }
#cv-card .cv-opt b { font-size: 13px; }
#cv-card .cv-opt span { font-size: 11px; color: var(--text-faint); }
#cv-card .cv-opt:hover { border-color: var(--accent); }
#cv-card .hidden { display: none !important; }
#cv-card .cv-play { width: 100%; height: 32px; }
/* Opened from the Learning page (its thumbnail picker): over that page,
   which stands above the menus at 390. */
#framepick.fp-over-learn { z-index: 395; top: 0; }