/* Compact generation "spec bar" for the canvas image/video node panels.
   Loaded after the tapnow theme files; scoped to the node panel bottom row:
   the parameter selects (canvas-select shells), the points chip, the run
   button, and the floating select menus. Both generation panels share the
   same bar geometry so the controls read as one instrument cluster at the
   scale of the node window (30px controls, 11px labels, 30px chip/run). */

/* --- Bar container: one dark well for both image and video panels --- */
.canvas-page .canvas-node-panel.is-image-generation-panel .canvas-panel-bottom,
.canvas-page .canvas-node-panel.is-video-generation-panel .canvas-panel-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: #101010;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.05);
}

.canvas-page .canvas-node-panel .canvas-panel-bottom .canvas-context-settings {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  align-items: flex-end;
  row-gap: 6px;
  column-gap: 5px;
}

.canvas-page .canvas-node-panel .canvas-panel-bottom .canvas-context-actions {
  flex: 0 0 auto;
  gap: 6px;
}

/* --- Parameter controls: compact, proportional widths.
   Model control grows to fill (so the full model name stays visible);
   size/quality controls hold a tight fixed basis; count controls are
   the narrowest slot. */
.canvas-page .canvas-node-panel .canvas-select-shell {
  position: relative;
  width: auto;
  min-width: 0;
  flex: 0 1 84px;
}

.canvas-page .canvas-node-panel .canvas-select-shell.is-count-select {
  flex: 0 0 70px;
  width: 70px;
}

/* 170px (2026-10, user-requested resize): the longest image-model name
   (极绘 image2.5 快速版, ≈99px at 11px) plus logo/arrow/padding needs the
   room to stay on one line; at 140px it ellipsized. */
.canvas-page .canvas-node-panel .canvas-select-shell.is-model-select {
  flex: 0 1 170px;
  width: 170px;
  min-width: 170px;
  max-width: 170px;
}

/* Image panels wrap each select in a labelled .canvas-param-control grid;
   the flex geometry lives on the wrapper there, and the shell fills it. */
.canvas-page .is-image-generation-panel .canvas-param-control {
  flex: 0 1 92px;
  min-width: 0;
  gap: 3px;
}

.canvas-page .is-image-generation-panel .canvas-param-control:has(.canvas-context-select-model) {
  flex: 0 1 170px;
  min-width: 170px;
  max-width: 170px;
}

.canvas-page .is-image-generation-panel .canvas-param-control:has(.canvas-context-select-count) {
  flex: 0 0 76px;
  min-width: 76px;
}

.canvas-page .is-image-generation-panel .canvas-param-control .canvas-select-shell {
  width: 100%;
  flex: 0 1 auto;
}

.canvas-page .is-image-generation-panel .canvas-param-control > span {
  padding-left: 2px;
  font-size: 9px;
  letter-spacing: 0.04em;
}

/* --- Trigger (visible control face) --- */
.canvas-page .canvas-node-panel .canvas-select-trigger {
  height: 26px;
  gap: 6px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 11px;
}

.canvas-page .canvas-node-panel .canvas-select-arrow {
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-right-width: 1.5px;
  border-bottom-width: 1.5px;
}

.canvas-page .canvas-node-panel .canvas-select-trigger .canvas-select-value {
  gap: 6px;
}

.canvas-page .canvas-select-menu .canvas-select-option-content {
  gap: 8px;
}

/* Model mark and aspect frame shrink with the trigger so the name keeps
   its room. */
.canvas-page .canvas-node-panel .canvas-select-trigger .canvas-model-logo {
  width: 14px;
  height: 14px;
}

.canvas-page .canvas-node-panel .canvas-select-trigger .aspect-ratio-preview {
  width: 26px;
  height: 18px;
  flex: 0 0 26px;
}

.canvas-page .canvas-node-panel .canvas-select-trigger .aspect-ratio-preview.is-auto .aspect-ratio-frame {
  width: 22px;
  height: 15px;
}

/* --- Points chip: quiet secondary readout, smaller than the controls --- */
.canvas-page .canvas-node-panel .canvas-point-cost-preview {
  height: 26px;
  gap: 4px;
  padding: 0 9px;
  font-size: 10px;
}

.canvas-page .canvas-node-panel .canvas-point-cost-preview strong {
  font-size: 12px;
}

.canvas-page .canvas-node-panel .canvas-point-cost-icon {
  font-size: 12px;
}

.canvas-page .canvas-node-panel .canvas-point-cost-icon,
.canvas-page .canvas-node-panel .canvas-point-cost-icon .ui-icon {
  width: 12px;
  height: 12px;
}

/* --- Run button: square, matches the 26px control line --- */
.canvas-page .canvas-node-panel .canvas-panel-run {
  width: 26px;
  height: 26px;
  min-width: 0;
  border-radius: 8px;
}

.canvas-page .canvas-node-panel .canvas-panel-run-icon,
.canvas-page .canvas-node-panel .canvas-panel-run-icon .ui-icon {
  width: 14px;
  height: 14px;
}

.canvas-page .canvas-node-panel .canvas-panel-run .canvas-strands-wait.is-button {
  width: 20px;
  height: 14px;
}

.canvas-page .canvas-node-panel .canvas-panel-run .canvas-strands-wait.is-button .canvas-strands-pulse i {
  width: 2px;
  height: 7px;
}

/* --- Floating select menus: roomy enough for full model names and the
   two-line model rows (2026-10 user-requested resize: the 32px/12px rows
   with 9px small print read cramped; positionMenu() widths live in
   interactions/select-menu.js). --- */
.canvas-page .canvas-select-menu {
  padding: 6px;
  border-radius: 10px;
}

.canvas-page .canvas-select-menu .canvas-select-option {
  min-height: 38px;
  gap: 10px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 13px;
}

.canvas-page .canvas-select-menu .canvas-model-logo {
  width: 20px;
  height: 20px;
}

/* Ratio menu frames match the create page's ratio grid slots (44x28 desktop;
   interactions/select-menu.js passes the same clamp box to
   aspect-ratio-preview.js), so both pickers read identically. */
.canvas-page .canvas-select-menu .aspect-ratio-preview {
  width: 44px;
  height: 28px;
  flex: 0 0 28px;
}

.canvas-page .canvas-select-menu .aspect-ratio-preview.is-auto .aspect-ratio-frame {
  width: 34px;
  height: 22px;
}

.canvas-page .canvas-select-menu.is-aspect-ratio-menu {
  gap: 4px;
}

.canvas-page .canvas-select-menu.is-aspect-ratio-menu .canvas-select-option {
  min-height: 60px;
  padding: 6px 5px;
}

/* Phone parity with the create workspace ratio grid (32x20 frames, 4 columns
   of 42px cells); the JS clamp box follows the same 768px breakpoint in
   interactions/select-menu.js. */
@media (max-width: 768px) {
  .canvas-page .canvas-select-menu.is-aspect-ratio-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
  }

  .canvas-page .canvas-select-menu.is-aspect-ratio-menu .canvas-select-option {
    min-height: 42px;
    padding: 2px 3px;
  }

  .canvas-page .canvas-select-menu.is-aspect-ratio-menu .canvas-select-option-content {
    gap: 3px;
  }

  .canvas-page .canvas-select-menu .aspect-ratio-preview {
    width: 32px;
    height: 20px;
    flex: 0 0 20px;
  }

  .canvas-page .canvas-select-menu .aspect-ratio-preview.is-auto .aspect-ratio-frame {
    width: 28px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-page .canvas-node-panel .canvas-select-trigger,
  .canvas-page .canvas-node-panel .canvas-select-arrow {
    transition: none;
  }
}