.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ==========================================================================
   V2 sticky field bar: lay the runner-rendered <form> out as a single row.
   The runner mounts <form class="space-y-3"> with one inner <div class="space-y-3">
   ("basicWrap") whose direct children are field wrappers. We override
   space-y-3 → flex-row inside the bar; everything else (advanced details,
   error messages) is hidden because it doesn't fit a single-row UI.
   ========================================================================== */
.v2-form-mount { min-width: 0; overflow: hidden; }
/* Top row: basic fields. schema-form mounts <form><div class="space-y-3">…</div></form>
   in this container; we flatten the inner stack into a horizontal flex row. */
.v2-form-mount > form { display: block; min-width: 0; }
.v2-form-mount > form > .space-y-3 {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  margin: 0;
  /* defeat Tailwind's space-y-3 — selector wins on specificity */
  /* Horizontal scroll so every author-declared field stays reachable when
     the agent has more controls than the bar can fit. */
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.v2-form-mount > form > .space-y-3::-webkit-scrollbar { height: 6px; }
.v2-form-mount > form > .space-y-3::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 9999px;
}
.v2-form-mount > form > .space-y-3 > * {
  margin: 0!important;
  /* Default a sensible minimum so a field wrapper that would otherwise
     collapse to 0 (e.g. visual-picker trigger card whose inner block uses
     width:100%) stays visible. */
  min-width: 140px;
  flex: 0 0 auto;
}
/* Schema-form ships a <details> "More options" wrapper for any advanced
   fields it bucketed. Our post-mount split moves those fields out of it
   into [data-v2-advanced-row]; keep the empty <details> hidden so it
   doesn't leave a stray "More options" toggle in the bar. */
.v2-form-mount > form > details { display: none; }

/* ── Advanced row — small pill chips under the basic row.
      Matches templates/v1/1.png: subtle, muted "16:9 · 5s" style. ── */
.v2-advanced-row {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  gap: 6px;
}
.v2-advanced-row::-webkit-scrollbar { height: 4px; }
.v2-advanced-row::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 9999px;
}
.v2-advanced-row > * { margin: 0; min-width: 0; flex: 0 0 auto; }

/* Hide stacked labels, helpers, and empty error rows — chip is value-only. */
.v2-advanced-row .mb-1\.5,
.v2-advanced-row .mb-2,
.v2-advanced-row label[for]:not(:empty),
.v2-advanced-row [data-help-trigger],
.v2-advanced-row [role="alert"]:empty { display: none !important; }

/* Every interactive control inside the row collapses to a filled 26px pill.
   Matches templates/v1/1.png: solid panel-input background, foreground text,
   no border — reads as a chip, not as an input field. */
.v2-advanced-row button,
.v2-advanced-row select,
.v2-advanced-row input[type="text"]:not([type="file"]),
.v2-advanced-row input[type="number"] {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  line-height: 26px !important;
  border-radius: 9999px !important;
  background: var(--panel-input) !important;
  border: 1px solid transparent !important;
  color: hsl(var(--foreground)) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.v2-advanced-row button:hover,
.v2-advanced-row select:hover {
  background: var(--panel-hover) !important;
}

/* Hide chevrons / extra svgs inside the custom select button — keep only
   the value text so the chip reads "16:9", "5s", etc. */
.v2-advanced-row button svg { display: none !important; }
.v2-advanced-row button .shrink-0.ml-2 { display: none !important; }

/* Dropzone (file-upload) shrinks to a chip too. */
.v2-advanced-row .dropzone-empty,
.v2-advanced-row [data-media-field] {
  min-height: 22px !important;
  max-width: 120px !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
}
.v2-advanced-row .dropzone-empty * { font-size: 11px !important; }

/* Chip-group / radio-group buttons — same compact treatment. */
.v2-advanced-row [role="radio"],
.v2-advanced-row [role="radiogroup"] > button {
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  border-radius: 9999px !important;
}

/* prompt-picker / visual-picker grid wrappers don't belong in a pill row
   visually; collapse the inner grid down so they still fit. */
.v2-advanced-row [role="radiogroup"].grid {
  display: inline-flex !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
}

/* Field wrappers (each child of basicWrap is one rendered field). Drop label
   stacks because the bar has no headroom; we rely on placeholder/value text. */
.v2-form-mount > form > .space-y-3 > div > div.mb-1\.5,
.v2-form-mount > form > .space-y-3 > div > div.mb-2 { display: none; }
.v2-form-mount > form > .space-y-3 > div [data-help-trigger] { display: none; }

/* Visual-picker / inline pill triggers — already compact, keep as-is */
.v2-form-mount > form > .space-y-3 > div [aria-haspopup="dialog"] { white-space: nowrap; }

/* Media field (file dropzone): shrink to a small 48x48 button-like target.
   The runner's media component wraps the dropzone in deep nested divs;
   scope the override to elements with [data-media-field] when present
   and to any <input type="file"> sibling otherwise. */
.v2-form-mount > form > .space-y-3 > div .dropzone-empty,
.v2-form-mount > form > .space-y-3 > div [data-media-field] {
  min-height: 48px !important;
  max-width: 220px;
  padding: 6px 10px !important;
}
.v2-form-mount > form > .space-y-3 > div .dropzone-empty * { font-size: 12px !important; }

/* Textareas / prompt inputs grow to fill the middle */
.v2-form-mount > form > .space-y-3 > div:has(textarea),
.v2-form-mount > form > .space-y-3 > div:has([contenteditable="true"][role="textbox"]) {
  flex: 1 1 0% !important;
  min-width: 240px;
}
.v2-form-mount > form > .space-y-3 > div textarea {
  min-height: 48px;
  height: 48px;
  resize: none;
}

/* Plain selects / number / chip groups stay compact */
.v2-form-mount > form > .space-y-3 > div select,
.v2-form-mount > form > .space-y-3 > div input[type="number"],
.v2-form-mount > form > .space-y-3 > div input[type="text"]:not([type="file"]) {
  height: 40px;
}

/* Model selector wrapper: if it ended up inside the form, pin it small left */
.v2-form-mount > form .model-selector-in-form { margin: 0; flex: 0 0 auto; }

/* Error rows the runner appends underneath — hide in the bar to keep one line */
.v2-form-mount > form > .space-y-3 > div [role="alert"]:empty { display: none; }
/* Skeleton placeholder swapped out once <form> mounts */
.v2-form-mount.v2-form-ready > div.animate-pulse { display: none; }

/* ── Bar height parity ──
   The basic row is align-items: stretch so every wrapper grows to the
   row's tallest child. Bar is pinned to 100 px and every interactive
   primitive inside each wrapper fills that 100 px so all fields read as
   one unified row instead of differently-sized cards. */
.v2-form-mount > form > .space-y-3 { min-height: 100px; }
.v2-form-mount > form > .space-y-3 > div {
  display: flex;
  flex-direction: column;
  /* min-height: 100px; */
}
.v2-form-mount > form > .space-y-3 > div > select,
.v2-form-mount > form > .space-y-3 > div > input,
.v2-form-mount > form > .space-y-3 > div > textarea,
.v2-form-mount > form > .space-y-3 > div > button,
.v2-form-mount > form > .space-y-3 > div > [contenteditable="true"][role="textbox"],
.v2-form-mount > form > .space-y-3 > div > .dropzone-empty,
.v2-form-mount > form > .space-y-3 > div > [data-media-field],
.v2-form-mount > form > .space-y-3 > div > [aria-haspopup="dialog"] {
  flex: 1 1 auto;
  height: 100% !important;
  min-height: 100px !important;
}

/* Mobile (Studio tab): bar is docked inline, stack fields vertically again
   and let labels reappear so the form is usable on a small screen. */
@media (max-width: 1023.98px) {
  .v2-field-bar { box-shadow: none; }
  .v2-field-bar > div { padding: 0; }
  .v2-form-mount > form { display: block; }
  .v2-form-mount > form > .space-y-3 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .v2-form-mount > form > .space-y-3 > * { flex: 0 0 auto; }
  .v2-form-mount > form > .space-y-3 > div > div.mb-1\.5,
  .v2-form-mount > form > .space-y-3 > div > div.mb-2 { display: block; }
  .v2-form-mount > form > .space-y-3 > div .dropzone-empty,
  .v2-form-mount > form > .space-y-3 > div [data-media-field] {
    max-width: none;
    min-height: 120px !important;
    padding: 12px !important;
  }
  .v2-form-mount > form > .space-y-3 > div textarea { height: auto; min-height: 80px; resize: vertical; }
  /* Hide the desktop Generate column on mobile — the mobile-generate-bar at
     the bottom of the page is what users tap there. */
  .v2-field-bar > div > div > div:last-child > button[data-agent-run-button],
  .v2-field-bar > div > div > div:last-child > p { display: none; }
}
.v2-form-mount [data-agent-run-button] {
  margin-top: 0 !important;
}

.v2-form-mount > form > .space-y-3 .dropzone-empty,.v2-form-mount > form > .space-y-3 [data-uap-group="basic"] .h-\[115px\]{
  height:100px;
  max-height: 100px;
}
.v2-form-mount > form > .space-y-3 [data-id] > *{
  height:100px;
  max-height: 100px;
  overflow-y:auto;
  width: 100%;
}

.v2-form-mount > form > .space-y-3 [data-id] > .mb-2{
  height:auto !important;
  max-height: 100px;
}

.v2-form-mount > form > .space-y-3 [role="alert"]{
  height:auto;
  max-height: auto;
}

.v2-form-mount > form > .space-y-3 [data-component="visual-picker"]{
  height:auto;
  max-height: auto;
}
.v2-form-mount > form > .space-y-3 [data-component="visual-picker"] .pr-3{
  padding-right: 0.375rem!important;
}
.v2-form-mount > form > .space-y-3 [data-component="visual-picker"] .pr-3 > div{
  width: 100%;
  height: 100%;
}
.v2-form-mount [data-agent-run-button]{
  margin-top: 0px!important;
}
.v2-form-mount > form > .space-y-3 [data-component="visual-picker"] .pr-3 > span{
  position: absolute;
  margin: 0px auto;
  width: 92%;
  background: rgba(0, 0, 0, .5);
  text-align: center;
  opacity: .8;
  bottom: 5px;
  border-radius: 10px;
}

/* Guide tab — long-form SEO content */
.prose-guide { color: #898A8B; font-size: 16px; line-height: 24px; }
.prose-guide :is(h1, h2, h3, strong, dt) { color: hsl(var(--foreground)); font-weight: 600; }
.prose-guide :is(h1, h2) { font-size: 16px; line-height: 21px; margin: 24px 0 10px; }
.prose-guide h3 { font-size: 14px; line-height: 20px; margin: 12px 0 4px; }
.prose-guide h3 + p { margin-bottom: 10px; }
.prose-guide dt { font-size: 14px; }
.prose-guide :is(p, ul, dd) { margin-bottom: 14px; }
.prose-guide ul { padding-left: 22px; list-style: disc; }
.prose-guide > :first-child { margin-top: 0; }

/* Size Slider (native range input — Tailwind can't style pseudo-elements) */
.size-slider { -webkit-appearance: none; appearance: none; width: 100px; height: 4px; background: #404040; border-radius: 9999px; cursor: pointer; outline: none; }
.size-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #9335EC; cursor: pointer; border: none; box-shadow: 0 2px 8px rgba(147, 53, 236, 0.5); margin-top: 0; }
.size-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #9335EC; cursor: pointer; border: none; box-shadow: 0 2px 8px rgba(147, 53, 236, 0.5); }
.size-slider::-moz-range-track { background: #404040; height: 4px; border-radius: 9999px; }

.view-toggle-container { display: flex; align-items: center; width: 94px; padding: 5px; background: #262626; border-radius: 24px; gap: 2px; }
.view-toggle-btn { flex: 1; height: 30px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #737373; background: transparent; border: none; cursor: pointer; transition: all 0.15s ease; }
.view-toggle-btn:hover { color: #a3a3a3; }
.view-toggle-btn.active { background: #404040; color: #ffffff; }

:root:not(.dark) .size-slider { background: #D9D9D9; }
:root:not(.dark) .size-slider::-moz-range-track { background: #D9D9D9; }
:root:not(.dark) .view-toggle-container { background: #DFE4EC; }
:root:not(.dark) .view-toggle-btn { color: #898A8B; }
:root:not(.dark) .view-toggle-btn:hover { color: #0D0D0D; }
:root:not(.dark) .view-toggle-btn.active { background: #ffffff; color: #0D0D0D; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* History list/grid scaffolding (consumed by /js/runner/embed-runner.js when it renders the history list) */
@media (min-width: 1024px) {
  .history-list-card { max-width: 100%; }
  .history-list-media { flex: var(--list-media-flex, 1) 1 var(--list-media-basis, 0); min-width: 0; overflow: hidden; }
  .history-list-info { flex: var(--list-info-flex, 0) 0 var(--list-info-basis, 280px); max-width: var(--list-info-basis, 280px); overflow: hidden; }
}
.history-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px; justify-content: start; align-content: start; align-items: start; width: 100%; }
.history-grid.cols-4 { --cols: 4; }
.history-grid.cols-3 { --cols: 3; }
.history-grid.cols-2 { --cols: 2; }

.history-card { position: relative; width: 100%; border-radius: 16px; overflow: hidden; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
.history-grid .history-card { align-self: start; height: 0; padding-bottom: 73.75%; }
.history-card-media { position: absolute; inset: 0; background: hsl(var(--secondary)); }
.history-card-media-el { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.history-media-video { object-fit: cover; }
.history-media-image { object-fit: contain; background: rgba(0,0,0,0.04); }
.history-media-placeholder { background: hsl(var(--secondary)); }
.history-card > img, .history-card > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.history-card-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.8) 100%); opacity: 0; transition: opacity 0.2s; display: flex; flex-direction: column; justify-content: space-between; padding: 12px; }
.history-card:hover .history-card-overlay, .history-card.show-overlay .history-card-overlay { opacity: 1; }
.history-card-actions { display: flex; gap: 8px; }
.history-card-action { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; color: white; border: none; cursor: pointer; transition: background 0.2s; }
.history-card-action:hover { background: rgba(255,255,255,0.25); }
.history-card-text { color: white; font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.history-card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.history-card-badge { padding: 6px 10px; border-radius: 10px; font-size: 12px; line-height: 1; background: rgba(255,255,255,0.15); color: white; backdrop-filter: blur(8px); }

.history-list .history-card { aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; padding: 12px; border-radius: 16px; align-items: start; }
.history-list .history-card-media { position: relative; inset: auto; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: hsl(var(--secondary)); }
.history-list .history-card-media-el { position: absolute; inset: 0; }
.history-list .history-card-overlay { position: static; opacity: 1; background: none; padding: 4px 0; display: flex; flex-direction: column; gap: 10px; }
.history-list .history-card-text { color: hsl(var(--foreground)); -webkit-line-clamp: 8; }
.history-list .history-card-actions { justify-content: flex-end; gap: 8px; }
.history-list .history-card-badge { background: hsl(var(--secondary)); color: hsl(var(--foreground)); backdrop-filter: none; }
.history-list .history-card.history-card-text-only { grid-template-columns: 1fr; }
.history-list .history-card.history-card-text-only .history-card-media { display: none; }
.history-list .history-card.history-card-text-only .history-card-text { font-family: ui-monospace, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-word; -webkit-line-clamp: 6; }