/* Shared type and responsive contracts. Loaded after the feature styles.
   Keep controls touchable; reduce surrounding chrome, not their hit areas. */
:root {
  --font: 'Inter', 'InterFallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: var(--font);
  --font-display: var(--font);
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --studio-body: 14px;
  --studio-label: 13px;
  --studio-caption: 12px;
}
body { font-family: var(--font); line-height: 1.5; }
.workflow-card [data-release-inspect] {
  max-width: 100%;
  height: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}
.proj-item { flex-wrap: wrap; cursor: default; }
.proj-item-info { flex: 1 1 220px; min-width: 0; }
.proj-item-info .proj-name { overflow-wrap: anywhere; }
.proj-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.proj-item-actions button { min-height: 44px; min-width: 44px; }
.proj-item-info .proj-meta { font-size: var(--studio-caption); }
.studio-3d-stage[hidden] { display: none; }
.td-preview-feedback { padding: 8px 12px; color: var(--t2); font-size: var(--studio-label); }
.td-preview-feedback p { margin: 0 0 6px; }
.td-viewer-wrap .td-ctrl {
  position: relative; inset: auto; opacity: 1; pointer-events: auto;
  flex-wrap: nowrap; overflow-x: auto; max-width: 100%;
  background: var(--bg-card); scrollbar-width: thin;
}
.td-viewer-wrap .td-ctrl > * { flex-shrink: 0; }
.td-viewer-wrap .td-ctrl :is(button, select) { min-height: 44px; }
.td-card-thumb .td-card-select { position: absolute; inset: 0; z-index: 3; width: 100%; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.td-card-thumb .td-card-select:focus-visible { outline: 2px solid var(--t1); outline-offset: -3px; }
@media (max-width: 480px) {
  .proj-item-actions { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px; gap: 4px; }
  .proj-item-actions button { padding-inline: 6px; font-size: var(--studio-label); }
}
button, input, select, textarea, summary { font-family: var(--font); }
:where(h1, h2, h3, p, label, button, summary) { overflow-wrap: break-word; }
:where(h1, h2, h3) { font-weight: 600; text-wrap: balance; }
:where(.workflow-card-sub, .workflow-sub, .studio-page-description, .df-hint, .pf-hint) {
  font-size: var(--studio-label); line-height: 1.55;
}
:where(.workflow-card-title, .sl-title, .td-card-title, .df-section-title) {
  font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.015em;
}
:where(.field > label, .field--stack > label, .pf-label, .df-field-label, .ctrl-label) {
  font-size: var(--studio-caption); font-weight: 500; line-height: 1.5;
  text-transform: none; letter-spacing: 0;
}
:where(.btn-ghost, .btn-accent, .workspace-meta-btn, .td-tool-btn, .sl-tab, .persona-tab) {
  font-size: var(--studio-label); font-weight: 500; line-height: 1.35;
  text-transform: none; letter-spacing: 0;
}
#workspace-meta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px;
}
.studio-page-header { min-width: 0; width: 100%; margin: 0; }
.studio-page-heading { min-width: 0; }
.studio-page-header h1 { font-weight: 600; letter-spacing: -.035em; }
.studio-page-description { font-size: 13px; line-height: 1.5; }
.studio-workspace-tools, #studio-workspace-tools-body { display: contents; }
.studio-workspace-tools > summary { display: none; }
#studio-workspace-tools-body > .workspace-meta-actions {
  grid-column: 2; grid-row: 1; align-self: center; justify-content: flex-end;
  max-width: 440px; min-width: 0;
}
.studio-context {
  grid-column: 1 / -1; margin: 0; min-width: 0; gap: 8px 12px;
}
.studio-context button { max-width: 100%; white-space: normal; }
#studio-project-switch { text-align: left; overflow-wrap: anywhere; }
#workspace-meta > #api-banner { grid-column: 1 / -1; }
.studio-flow-actions { min-width: 0; flex-wrap: wrap; }
.studio-applied-context { min-width: 0; }
.gc:focus-within .gc-ov { opacity: 1; }
.gc :is(.gc-sel, .gc-copy) { padding: 0; border: 0; }
button.gc { padding: 0; color: var(--t1); }
.persona-create-head { display: none; }
.studio-generation-settings, .studio-generation-settings-body { display: contents; }
.studio-generation-settings > summary { display: none; }
.studio-mobile-disclosure, .studio-disclosure-body { display: contents; }
.studio-mobile-disclosure > summary { display: none; }
.studio-flow-steps { display: none; }
#content > #flow-canvas-wrap { width: 100%; max-width: none; margin: 0; }
#content > :is(#flow-save-status, #flow-run-status) {
  flex: none; width: 100%; margin: 0; padding: 0 22px 10px;
  border: 0; border-radius: 0; background: none;
  font-size: 12px; line-height: 1.5; color: var(--t3);
}
#content > :is(#flow-save-status, #flow-run-status):empty { display: none; }
@media (min-width: 769px) {
  #flow-canvas-wrap > .nf-toolbar { width: max-content; }
  .studio-flow-extra::details-content { display: contents; }
}
@media (max-width: 768px) {
  #content > :is(#flow-save-status, #flow-run-status) { padding: 0 0 10px; }
  #app[data-mode='flow'] #content:has(#flow-canvas-wrap) {
    padding: 0 16px 24px !important; overflow: visible !important;
  }
  #flow-canvas-wrap { display: flex; flex-direction: column; height: auto; min-height: 0; gap: 12px; overflow: visible; background: none; }
  #flow-canvas, .nf-minimap, .nf-info { display: none; }
  .nf-toolbar #nf-wires { display: none; }
  #flow-canvas-wrap > .nf-toolbar {
    position: static; transform: none; width: 100%; max-width: none; order: 0;
    padding: 8px; border-radius: 14px; overflow: visible; white-space: normal;
  }
  .nf-toolbar button { min-width: 44px; min-height: 44px; }
  .nf-toolbar .nf-flow-name { flex: 1 0 100%; min-width: 0; max-width: none; order: -1; overflow-wrap: anywhere; font-size: 13px; padding: 4px; }
  .nf-toolbar .nf-sep { display: none; }
  .nf-toolbar #flow-publish-app { position: static; }
  .studio-flow-extra { display: block; width: 100%; }
  .studio-flow-extra > summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; cursor: pointer; list-style: none; font-size: 13px; }
  .studio-flow-extra > .studio-disclosure-body { display: flex; flex-wrap: wrap; gap: 6px; }
  .studio-flow-extra:not([open]) > .studio-disclosure-body { display: none; }
  #flow-canvas-wrap > .nf-mobile-notice { position: static; order: 1; padding: 0; margin: 0; border: 0; background: none; text-align: left; font-size: 12px; }
  .studio-flow-steps { display: flex; flex-direction: column; gap: 8px; order: 2; }
  .studio-flow-add { display: flex; gap: 8px; }
  .studio-flow-add select { flex: 1; width: 0; min-width: 0; height: 44px; min-height: 44px; line-height: 1.3; padding: 0 10px; border: 1px solid var(--border); background: var(--surface); color: var(--t1); }
  .studio-flow-step-list { display: grid; gap: 8px; }
  .studio-flow-step { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
  .studio-flow-step > span, .studio-flow-step small, .studio-flow-step-empty { font-size: 12px; color: var(--t3); font-weight: 400; }
  .studio-flow-step > div { display: flex; flex-wrap: wrap; gap: 6px; }
  #flow-canvas-wrap #flow-simple-panel { position: static !important; width: 100% !important; max-height: none !important; order: 3; box-shadow: none !important; }
  #flow-canvas-wrap .nf-popup { position: fixed; left: 16px !important; top: 80px !important; width: calc(100vw - 32px); max-height: calc(100dvh - 104px); overflow: auto; }
}

/* A single page scroll keeps the title ahead of its local navigation, including
   short laptop/landscape screens where a fixed composer used to eat the editor. */
@media (max-width: 1180px), (max-height: 760px) {
  #main { overflow-y: auto; overflow-x: hidden; }
  #main > #content { flex: 1 0 auto; overflow: visible; min-height: 0; }
  #main > #qstrip { flex-shrink: 0; }
  #workspace-meta { gap: 12px 16px; }
  .studio-topbar { flex-shrink: 0; }
}
@media (max-width: 900px) {
  #workspace-meta { display: block; padding: 18px 22px 16px; }
  .studio-page-header { display: block; }
  .studio-page-header h1 { font-size: 24px; margin-bottom: 6px; }
  .studio-workspace-tools { display: block; margin-top: 8px; }
  .studio-workspace-tools > summary {
    display: inline-flex; align-items: center; justify-content: space-between;
    gap: 10px; min-height: 44px; padding: 0 2px; color: var(--t2);
    font-size: 12px; font-weight: 500; list-style: none; cursor: pointer;
  }
  .studio-workspace-tools > summary::-webkit-details-marker { display: none; }
  .studio-workspace-tools[open] > summary > span { transform: rotate(180deg); }
  #studio-workspace-tools-body {
    display: flex; flex-direction: column; gap: 12px; padding: 12px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  }
  .studio-workspace-tools:not([open]) > #studio-workspace-tools-body { display: none; }
  #studio-workspace-tools-body > .workspace-meta-actions {
    justify-content: flex-start; max-width: none; gap: 6px;
  }
  .studio-context { gap: 6px; }
  #studio-recovery-status { order: 3; flex-basis: 100%; min-width: 0; }
  .studio-context .btn-ghost, .workspace-meta-btn { min-height: 44px; }
  #app[data-mode='voice'] .voice-studio { grid-template-columns: minmax(0, 1fr) 230px; }
  .td-center-pane { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .studio-search { max-width: 45%; }
}
@media (max-width: 640px) {
  #app { height: 100dvh; }
  #workspace-meta { padding: 16px 16px 12px; }
  .studio-topbar {
    min-height: 56px; height: 56px; gap: 8px; padding: 0 12px;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
  }
  .studio-breadcrumb { min-width: 0; flex: 1; gap: 6px; font-size: 12px; }
  #studio-location { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .studio-menu, .studio-search, .studio-account {
    width: 44px; min-width: 44px; height: 44px; min-height: 44px !important;
  }
  .studio-search { padding: 0; justify-content: center; margin-left: 0; }
  .studio-page-header h1 { font-size: 24px; line-height: 1.25; }
  .studio-page-description { font-size: 13px; }
  .studio-workspace-tools { margin-top: 2px; }
  #content { padding: 0 16px 24px; }
  .studio-mobile-disclosure { display: block; width: 100%; }
  .studio-mobile-disclosure > summary {
    display: flex; align-items: center; justify-content: space-between; min-height: 44px;
    font-size: 13px; color: var(--t2); cursor: pointer; list-style: none;
  }
  .studio-mobile-disclosure > summary::-webkit-details-marker { display: none; }
  .studio-disclosure-body { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
  .studio-mobile-disclosure:not([open]) > .studio-disclosure-body { display: none; }
  .lib-bar { padding: 12px; gap: 6px; }
  .lib-bar .lib-search-w { flex: 1 0 100%; width: 100%; min-width: 0; }
  .lib-bar .lib-chip { min-height: 44px; padding: 6px 10px; font-size: 12px; }
  .lib-bar .lib-view-btn { min-width: 44px; min-height: 44px; }
  .lib-bar :is(.lib-sem-w, .lib-select-wrap) { min-width: 0; max-width: 100%; }
  .lib-bar .lib-sem-w { flex-basis: 100%; }
  .lib-bar .lib-select { width: 100%; min-height: 44px; }
  .batch-sheet-header-top .toolbar { gap: 6px; }
  .batch-sheet-header-top .workflow-sub { font-size: 12px; margin-bottom: 8px; }
  #batch-sheet-queue { max-width: 100%; white-space: normal !important; }
  #prompt-zone { padding: 0 16px 16px; }
  .prompt-card, .voice-lib, .vc-empty-card, .flow-section, .persona-hero-empty,
  .df-section, .sl-main, .sl-side, .persona-form, .td-tool-content {
    padding: 16px; border-radius: 16px;
  }
  #app .prompt-card #prompt { min-height: 104px; padding: 12px 0; }
  .prompt-card-footer { padding-top: 12px; gap: 10px; }
  .prompt-card-footer #controls-row { gap: 8px; }
  #app .prompt-card-footer #controls-row { overflow: visible; flex-wrap: wrap; }
  .controls-row .ctrl-group { min-width: 0; max-width: 100%; height: auto; min-height: 44px; }
  #controls-row > .ctrl-group:has(.model-select, #ss-vengine, #ss-voice, #ss-vtype) {
    flex: 1 1 100%; width: 100%;
  }
  #app .prompt-card-footer .ctrl-select { width: 100%; min-width: 0; max-width: 100%; height: 44px; border-radius: 10px; }
  /* WebKit includes native option text in a flex parent's scroll extent unless
     the select is allowed to shrink and its control group contains overflow. */
  #controls-row .ctrl-group:has(select) { overflow: clip; }
  #controls-row .ctrl-group:has(select:focus-visible) { outline: var(--focus-ring); outline-offset: 3px; }
  #app .field--stack:has(> select) { min-width: 0; overflow: clip; }
  #app .field--stack:has(> select:focus-visible) { outline: var(--focus-ring); outline-offset: 3px; }
  #app :is(select, input, textarea) { min-width: 0; }
  .studio-generation-settings { display: block; width: 100%; }
  .studio-generation-settings > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 44px; font-size: 13px; color: var(--t2); cursor: pointer; list-style: none;
  }
  .studio-generation-settings > summary::-webkit-details-marker { display: none; }
  .studio-generation-settings-body { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; }
  .studio-generation-settings:not([open]) > .studio-generation-settings-body { display: none; }
  .studio-generation-settings-body .ctrl-group { flex-wrap: wrap; }
  .studio-generation-settings-body .ctrl-group:has([data-ratio], [data-vratio]) { flex-basis: 100%; }
  .studio-generation-settings-body .ctrl-label { display: block; flex-basis: 100%; font-size: 12px; }
  #app .controls-row :is(.ctrl-chip, .ctrl-num button) { min-width: 44px; min-height: 44px; height: auto; }
  #app .controls-row .ctrl-num { height: 44px; }
  .studio-voice-settings-body { position: static; width: 100%; padding: 12px; margin-top: 8px; box-shadow: none; }
  .studio-voice-settings-body .ctrl-group { flex-wrap: wrap; }
  .studio-voice-settings-body .ctrl-slider { flex: 1; }
  .ctrl-group :is(select, input) { max-width: 100%; }
  #app :is(input:not([type='checkbox']):not([type='radio']):not([type='range']), select, textarea),
  :is(.auth-input, .std-modal-input, .set-input) { font-size: 16px; }
  #app select:not([multiple]) { height: 44px; min-height: 44px; padding-top: 0; padding-bottom: 0; line-height: normal; }
  #app :is(.btn-ghost, .btn-accent, .tl-btn, .voice-tool-btn, .td-tool-btn, .persona-tab,
           .df-tab, .studio-voice-settings summary, .ctrl-select, .std-select) { min-height: 44px; }
  .studio-script-heading { margin-bottom: 4px; }
  .studio-mobile-voice { padding: 10px 12px; min-height: 44px; border-radius: 12px; }
  .studio-mobile-voice > span { min-width: 0; }
  .studio-mobile-voice > span:first-child { flex: 1; overflow-wrap: anywhere; }
  .studio-mobile-voice > span:last-child { flex-shrink: 0; }
  #app[data-mode='voice'] .vc-empty-card { min-height: 0; padding: 24px 16px; }
  #app[data-mode='voice'] .vc-empty-starters { margin-top: 16px; }
  #app[data-mode='voice'] .vc-rail { padding: 16px; }
  .flow-list-page .flow-quickstart { padding: 16px; border-radius: 16px; }
  .flow-quickstart .btn-accent { width: auto; }
  .studio-flow-tabs { gap: 4px; }
  .studio-flow-tabs button { padding: 8px 10px; min-height: 44px; font-size: 12px; }
  #flow-apps-catalogue > .workflow-card { padding: 16px; border-radius: 16px; }
  #flow-apps-catalogue .studio-app-card { padding: 16px; gap: 8px; }
  .studio-app-open { padding-top: 6px; }
  .persona-action-card { padding: 16px; }
  .persona-source-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .persona-source-card { min-width: 0; min-height: 44px; padding: 10px 6px; text-align: center; }
  .persona-source-card small { display: none; }
  .persona-back { margin-bottom: 12px; }
  .persona-form .workflow-mini-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .persona-form .workflow-mini-stats > div { min-width: 0; padding: 12px; }
  .persona-form .workflow-mini-stats small { font-size: 12px; letter-spacing: 0; line-height: 1.4; }
  .persona-actor-grid { gap: 8px; }
  .df-tabs { margin-top: 0; gap: 6px; }
  .df-tabs > * { min-width: 0; padding: 8px 10px; }
  .sl-grid { gap: 16px; }
  .studio-sound-tool { margin-bottom: 16px; gap: 4px; }
  .sl-bar { margin-bottom: 12px; }
  .sl-main { min-width: 0; }
  .td-center-pane { min-height: 0; gap: 16px; }
  .td-tool-rail { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
  .td-tool-btn { width: 100%; justify-content: center; padding: 8px; font-size: 12px; }
  .studio-3d-stage { min-height: 220px; padding: 40px 16px 32px; border-radius: 16px; }
  .studio-stage-cube { transform: scale(.7); margin: -20px; }
  .studio-stage-caption h2 { font-size: 20px; }
  .studio-stage-caption p { font-size: 12px; }
  .td-right-panel { max-height: none; min-height: 0; }
  .td-panel-head { padding: 12px 16px; }
  .tl-preview { border-radius: 16px; min-height: 180px; height: 220px; }
  .tl-bar, .tl-group { gap: 6px; }
  .tl-bar-right { flex-wrap: wrap; gap: 6px; }
  .tl-asset-add { min-height: 36px; }
  #auth-gate { padding: 16px; }
  .auth-brand-panel { padding: 20px; }
  .auth-brand-copy { padding-top: 16px; }
  .auth-brand-copy h2 { font-size: 24px; line-height: 1.15; letter-spacing: -.035em; }
  .auth-brand-copy p:not(.studio-eyebrow) { margin: 0; font-size: 13px; }
  .auth-form-panel { padding: 24px 20px; }
  .auth-title { font-size: 24px; letter-spacing: -.025em; }
}
@media (max-width: 360px) {
  .studio-breadcrumb > span:first-child, .studio-breadcrumb > span:nth-child(2) { display: none; }
  .studio-mobile-voice > span:last-child { font-size: 11px; }
  .persona-actor-grid { grid-template-columns: minmax(0, 1fr); }
}
.studio-media-pagination{display:flex;gap:8px;justify-content:space-between;margin-top:12px}
.studio-media-note{font-size:12px;color:var(--t3);line-height:1.5}
.uikit-modal{display:flex;flex-direction:column;max-height:calc(100dvh - 32px)}
.uikit-modal-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:3px;margin:-3px}
.uikit-modal-actions{flex-shrink:0}
.studio-recovery-field{padding:12px 0;border-top:1px solid var(--glass-border)}
.studio-recovery-field pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:140px;overflow:auto;padding:10px;background:var(--surface);border-radius:8px;font:13px/1.5 var(--font)}
.studio-recovery-field p{margin:8px 0 4px;color:var(--t3)}
.studio-recovery-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.uikit-modal-body h2{font-size:16px;margin-top:20px}
@media (max-width: 640px) {
  .uikit-modal-body :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size:16px; min-width:0; max-width:100%; }
  .uikit-modal-body :is(input:not([type=checkbox]):not([type=radio]), select) { height:44px; min-height:44px; }
  .uikit-modal-body select { padding:0 10px; line-height:normal; }
  .uikit-modal :is(button, .btn-ghost) { min-height:44px; }
}

.uikit-modal-body label.studio-recovery-claim { display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 44px; margin: 12px 0; font-size: 13px; cursor: pointer; }
.uikit-modal-body .studio-recovery-claim input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }

/* Read-only credit wallet; retain the compact navigation at phone widths. */
#studio-credits { flex: 0 1 auto; min-width: 0; max-width: 160px; }
.credits-chip { max-width: 100%; min-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.credits-account { margin: 16px 0; }
#studio-credit-notice:empty { display: none; }
#studio-credit-notice { flex: none; padding: 0 24px; max-height: 30vh; overflow-y: auto; }
.credits-shortfall { padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.credits-shortfall p { margin: 0 0 8px; }
.credits-shortfall-help { color: var(--t2); }
.credits-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.credits-actions button, .credits-account button { min-height: 44px; }
@media (max-width: 640px) {
  #studio-credits { max-width: 90px; flex-shrink: 0; }
  .studio-topbar:has(#studio-credits:not([hidden])) .studio-breadcrumb > span:not(#studio-location) { display: none; }
  #studio-credit-notice { padding: 0 12px; }
}

.qc-dot.review_required, .q-summary-seg.review { background: var(--warn); }
.q-summary-nums .review, .qc-review, .jd-status.review_required { color: var(--warn); }
.jd-review-note { padding: 12px; margin: 12px 0; border: 1px solid var(--border); border-radius: 8px; line-height: 1.5; }
.jd-reconcile-status { flex-basis: 100%; margin: 4px 0; font-size: 12px; color: var(--t2); }

/* Notification media dialogs reserve room for the native transport controls. */
#notification-result-overlay .modal-panel { width: min(420px, calc(100vw - 32px)); padding: 0; }
#notification-result-overlay .notification-result-body { padding: 16px; display: grid; gap: 12px; }
#notification-result-overlay .notification-result-body p { margin: 0; overflow-wrap: anywhere; }
#notification-result-overlay audio { display: block; width: 100%; min-width: 0; }
#notification-result-overlay a[download] { justify-self: start; }