/* Native, responsive reconstruction of Figma Frame 4 and Frame 5. */
.workflow-page .main { min-height:100dvh; }
.workflow-view { width:77.631579%; max-width:1180px; margin:calc(12 * var(--u)) auto calc(80 * var(--u)); }
.workflow-heading { display:flex; align-items:center; gap:calc(18 * var(--u)); margin-bottom:calc(45 * var(--u)); }
.workflow-heading h1 { line-height:calc(39 * var(--u)); }
.workflow-heading .icon-button { width:24px; height:28px; }
.workflow-top-grid,
.workflow-bottom-grid { display:grid; grid-template-columns:41.694915% minmax(0,1fr); column-gap:16.949153%; align-items:start; }
.workflow-step-title { font-size:1rem; font-weight:700; color:#939393; line-height:calc(23 * var(--u)); }
.workflow-source-controls { margin-top:calc(14 * var(--u)); min-height:calc(162 * var(--u)); }
.workflow-upload-row { display:grid; grid-template-columns:318fr 144fr; gap:calc(30 * var(--u)); }
.workflow-upload-button,
.workflow-secondary,
.workflow-model-button { display:flex; align-items:center; justify-content:center; height:calc(48 * var(--u)); min-height:38px; border-radius:calc(8 * var(--u)); white-space:nowrap; }
.workflow-upload-button { gap:5px; background:var(--red); color:#fff; font-weight:700; }
.workflow-upload-button:hover { background:#be1b27; }
.workflow-upload-button .icon { width:20px; height:20px; }
.workflow-secondary { background:#fff; color:var(--red); font-weight:700; }
.workflow-secondary:hover { background:#fff0f1; }
.workflow-source-preview { position:relative; display:flex; align-items:center; gap:12px; height:calc(92 * var(--u)); min-height:65px; margin-top:calc(22 * var(--u)); background:#fff; border-radius:calc(8 * var(--u)); overflow:hidden; }
.workflow-source-preview img { height:100%; max-width:42%; object-fit:contain; }
.workflow-source-name { font-size:12px; min-width:0; padding-right:32px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workflow-remove-source { position:absolute; right:8px; top:8px; width:24px; height:24px; border-radius:50%; color:#777; background:#f5f5f5; }
.workflow-source-missing { color:#888; font-size:12px; padding:12px; overflow-wrap:anywhere; }
.workflow-model-step .workflow-step-title,
.workflow-result-step .workflow-step-title { margin-left:calc(9 * var(--u)); }
.workflow-model-picker { position:relative; margin:calc(14 * var(--u)) 0 0 calc(4 * var(--u)); width:calc(318 * var(--u)); max-width:100%; }
.workflow-model-button { width:100%; position:relative; background:#fff; font-weight:350; }
.workflow-model-button .icon { position:absolute; right:calc(52 * var(--u)); width:20px; height:20px; color:#a8a8a8; }
.workflow-model-menu { top:calc(100% + 8px); right:0; width:265px; max-width:calc(100vw - 48px); padding:16px; }
.workflow-model-menu p { color:#888; font-size:12px; margin-top:12px; }
.workflow-options-step { margin-top:calc(24 * var(--u)); }
.workflow-options-step .workflow-step-title,
.workflow-description-step .workflow-step-title { margin-left:calc(5 * var(--u)); }
.workflow-options { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:calc(30 * var(--u)); width:85.932203%; margin-top:calc(26 * var(--u)); }
.workflow-choice { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:38px; height:calc(48 * var(--u)); border-radius:calc(8 * var(--u)); background:#fff; color:var(--red); font-weight:700; cursor:pointer; text-align:center; }
.workflow-choice.chosen { background:var(--red); color:#fff; }
.workflow-choice:not(.chosen):hover { background:#fff0f1; }
.workflow-choice:has(input:focus-visible),
.workflow-character:has(input:focus-visible) { outline:2px solid var(--red); outline-offset:4px; }
.workflow-bottom-grid { margin-top:calc(32 * var(--u)); }
.workflow-composer { position:relative; height:calc(204 * var(--u)); min-height:160px; margin-top:calc(32 * var(--u)); border-radius:calc(20 * var(--u)); padding:calc(26 * var(--u)) calc(47 * var(--u)); background:#fff; box-shadow:0 0 calc(50 * var(--u)) #00000013; }
.workflow-prompt { padding:0; height:100%; padding-bottom:40px; outline:none; }
.workflow-prompt::placeholder { color:#d9d9d9; opacity:1; }
.workflow-composer:focus-within { box-shadow:0 0 calc(50 * var(--u)) #00000013,0 0 0 1px #dc222f33; }
.workflow-submit { position:absolute; right:calc(15 * var(--u)); bottom:calc(20 * var(--u)); margin:0; }
.workflow-result-step .workflow-step-title { color:var(--red); }
.workflow-result-row { display:flex; align-items:flex-start; gap:calc(49 * var(--u)); margin-top:calc(32 * var(--u)); }
.workflow-result { display:flex; align-items:center; justify-content:center; flex:0 1 calc(322 * var(--u)); min-width:0; height:calc(204 * var(--u)); min-height:160px; background:#fff; border-radius:calc(8 * var(--u)); }
.workflow-result-status { padding:16px; white-space:pre-line; color:#888; font-size:13px; line-height:1.8; text-align:center; }
.workflow-result-actions { flex-shrink:0; display:flex; flex-direction:column; gap:calc(15 * var(--u)); padding-top:calc(47 * var(--u)); }
.workflow-result-actions button { width:calc(100 * var(--u)); min-width:82px; height:calc(24 * var(--u)); min-height:24px; border-radius:20px; background:var(--red); color:white; font-weight:700; font-size:clamp(11px,.625vw,12px); }
.workflow-result-actions button:nth-child(3) { margin-top:calc(3 * var(--u)); }
.workflow-result-actions button:hover { background:#be1b27; }
.workflow-characters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(30 * var(--u)); }
.workflow-character { position:relative; display:flex; align-items:center; justify-content:center; height:calc(162 * var(--u)); min-width:0; padding:calc(15 * var(--u)) calc(14 * var(--u)); border-radius:calc(8 * var(--u)); background:white; cursor:pointer; }
.workflow-character.chosen { box-shadow:inset 0 0 0 2px var(--red); }
.workflow-character img { height:100%; width:100%; object-fit:contain; }
.workflow-character.claw { padding:calc(3 * var(--u)) calc(1 * var(--u)); }

@media(min-width:761px) and (max-width:1200px) {
  .workflow-view { width:86%; }
}

@media(max-width:1100px) {
  .workflow-view { margin-top:20px; }
  .workflow-heading { margin-bottom:32px; }
  .workflow-heading h1 { line-height:1.3; }
  .workflow-top-grid,
  .workflow-bottom-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
  .workflow-step-title { line-height:1.6; }
  .workflow-source-controls { min-height:0; margin-top:14px; }
  .workflow-source-preview { height:90px; margin-top:16px; }
  .workflow-model-step .workflow-step-title,
  .workflow-result-step .workflow-step-title,
  .workflow-options-step .workflow-step-title,
  .workflow-description-step .workflow-step-title { margin-left:0; }
  .workflow-model-picker { margin:14px 0 0; width:100%; }
  .workflow-model-button .icon { right:18px; }
  .workflow-options-step { margin-top:28px; }
  .workflow-options { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
  .workflow-view[data-mode="ip"] .workflow-options { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .workflow-bottom-grid { margin-top:28px; }
  .workflow-composer { height:180px; margin-top:14px; padding:20px; }
  .workflow-result-row { margin-top:14px; gap:24px; }
  .workflow-result { flex:1; height:180px; }
  .workflow-result-actions { padding-top:24px; gap:16px; }
  .workflow-result-actions button { width:100px; min-height:32px; }
  .workflow-characters { gap:16px; }
  .workflow-character { height:162px; padding:15px 8px; }
  .workflow-character.claw { padding:4px; }
}

@media(max-width:760px) {
  .workflow-page .topbar { height:80px; }
  .workflow-page .agent-mobile-back { display:block; margin-left:auto; font-size:13px; color:#777; }
  .workflow-view { width:calc(100% - 40px); margin-top:16px; margin-bottom:48px; }
  .workflow-heading { gap:14px; }
  .workflow-heading h1 { font-size:24px; max-width:none; }
  .workflow-upload-row { grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:12px; }
  .workflow-upload-button,
  .workflow-secondary,
  .workflow-model-button,
  .workflow-choice { min-height:44px; }
  .workflow-upload-button .icon { width:17px; height:17px; }
  .workflow-choice { font-size:12px; }
  .workflow-characters { gap:12px; }
  .workflow-character { height:132px; padding:12px 5px; }
  .workflow-composer { border-radius:16px; }
  .workflow-result-row { gap:16px; }
  .workflow-result-actions button { width:92px; }
}