/* 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;
}

.canvas-page .canvas-node-panel .canvas-select-shell.is-model-select {
  flex: 0 1 140px;
  width: 140px;
  min-width: 140px;
  max-width: 140px;
}

/* 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 140px;
  min-width: 140px;
  max-width: 140px;
}

.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: compact rows, roomy enough for full model
   names (positionMenu() widths live in interactions/select-menu.js). --- */
.canvas-page .canvas-select-menu {
  padding: 5px;
  border-radius: 10px;
}

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

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

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

.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: 52px;
  padding: 5px;
}

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