/* Image reference workflow — V2. The landing page stays minimal until a file is added. */
.upload-anchor{position:relative}.composer:has(.upload-popover:not([hidden])){z-index:12}.composer:has(.reference-tray:not([hidden])){min-height:160px}.reference-robot{z-index:4}
#attachButton{width:auto;min-width:41px;padding:0 13px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:24px;font-size:13px;white-space:nowrap}#attachButton svg{width:18px;height:18px}#attachButton[aria-expanded=true]{border-color:#9dac9b;background:#f5f8f3;box-shadow:0 0 0 3px #38583b06}#attachButton.has-images{color:#41654e}.upload-popover{position:absolute;bottom:calc(100% + 12px);left:0;width:324px;border:1px solid var(--line-strong);border-radius:21px;padding:18px;background:var(--surface-solid);box-shadow:0 18px 55px #17241b18,0 3px 10px #00000008;z-index:30;animation:upload-reveal .16s ease-out;transform-origin:bottom left}.upload-popover-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}.upload-popover-head strong{font-size:15px;font-weight:550;letter-spacing:-.3px}.upload-popover-head p{margin:6px 0 0;color:var(--muted);font-size:11px}.upload-popover-head .icon-button{width:26px;height:26px;background:var(--surface-muted);border-radius:50%;font-size:19px;color:var(--muted)}.upload-dropzone{display:flex;flex-direction:column;align-items:center;width:100%;padding:23px 10px 18px;border:1px dashed #bac5b8;border-radius:14px;background:linear-gradient(130deg,#f6f8f4,#fafbf9);gap:10px;cursor:pointer}.upload-dropzone:hover{border-color:#76937a;background:#f2f6ef}.upload-dropzone strong{font-size:12px;font-weight:500}.upload-dropzone>span:last-child{font-size:10px;color:var(--muted)}.upload-image-mark{position:relative;display:grid;place-items:center;width:38px;height:38px;background:#fff;border:1px solid #e0e8dd;border-radius:11px;box-shadow:0 4px 6px #293f2a05;margin-bottom:2px;color:#71866f;transform:rotate(-6deg)}.upload-image-mark svg{width:23px;height:23px}.upload-image-mark i{position:absolute;bottom:-3px;right:-4px;display:grid;place-items:center;width:16px;height:16px;font-style:normal;font-size:12px;border:2px solid #f6f8f4;border-radius:50%;background:#66866a;color:white}.upload-spec{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:var(--muted);margin-top:10px}.upload-samples{margin-top:17px;padding-top:14px;border-top:1px solid var(--line)}.upload-samples>div:first-child{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:10px}.upload-samples small{font-size:8px;letter-spacing:1px}.upload-sample-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.upload-sample-grid button{position:relative;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--surface-muted);height:64px;overflow:hidden}.upload-sample-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}.upload-sample-grid button:hover img{transform:scale(1.07)}.upload-sample-grid span{position:absolute;right:4px;bottom:4px;border-radius:4px;padding:2px 5px;background:#fffffff0;color:#364536;font-size:9px}.upload-limit{font-size:9px;margin:11px 0 0;text-align:center;color:var(--muted)}.reference-tray{margin:7px 2px 14px}.reference-tray-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;font-size:11px;color:var(--muted)}.reference-tray-head b{margin-left:6px;font-weight:400;font-size:10px;color:#879183}.reference-tray-head button{padding:3px 5px;background:none;border:0;color:var(--muted);font-size:10px}.reference-tray-head button:hover{color:#a04c46}#attachmentList{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;overflow-y:hidden;padding:3px 2px 9px;scrollbar-width:thin;scrollbar-color:#b6c0b1 transparent;scroll-snap-type:x proximity}.image-reference-card{position:relative;flex:0 0 100px;width:100px;scroll-snap-align:start}.image-reference-open{display:block;padding:0;width:100%;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface-muted);text-align:left}.image-reference-open img{display:block;width:100%;height:82px;object-fit:cover;transition:filter .2s}.image-reference-open:hover img{filter:brightness(.96)}.image-reference-name{display:block;padding:7px 7px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:9px;background:var(--surface-solid)}.reference-index{position:absolute;top:6px;left:6px;background:#ffffffeb;border:1px solid #00000006;color:#4b5d49;font-size:8px;border-radius:4px;padding:2px 5px;pointer-events:none;line-height:1.5}.remove-reference{position:absolute;right:5px;top:5px;display:grid;place-items:center;padding:0;width:23px;height:23px;border:1px solid #0000000a;border-radius:50%;background:#fffffff2;color:#4f5c50;font-size:16px;line-height:1;box-shadow:0 2px 4px #00000007}.remove-reference:hover{color:#a04c46;background:#fff}.add-reference-tile{flex:0 0 78px;border:1px dashed #c8d1c3;border-radius:12px;background:var(--surface);color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:110px;font-size:10px}.add-reference-tile span:first-child{font-size:23px;font-weight:300}.add-reference-tile:hover{border-color:#879f83;background:#f7f9f3}.upload-feedback{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:0 1px 10px;padding:9px 11px;border-radius:9px;background:#f2f5ed;color:#64755a;font-size:10px;line-height:1.7}.upload-feedback.is-error{background:#fbf0e9;color:#946644}.upload-feedback button{background:none;border:0;color:inherit;padding:2px 0;text-decoration:underline;text-underline-offset:3px;font-size:10px;white-space:nowrap}.upload-feedback .feedback-close{text-decoration:none;min-width:20px;font-size:16px}.composer-drop-overlay{position:absolute;inset:7px;border:1.5px dashed #91a98b;border-radius:28px;background:#f9fcf4f7;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#4c6745;pointer-events:none}.composer-drop-overlay svg{width:27px;height:27px}.composer-drop-overlay strong{font-size:16px;font-weight:500}.composer-drop-overlay span{font-size:11px;color:#74866b}.composer.is-dragging{z-index:15}.composer.is-reading #attachButton{opacity:.65;pointer-events:none}.composer.is-reading .submit-button{opacity:.4;pointer-events:none}.reference-preview-dialog{width:760px}.reference-preview-dialog .dialog-head h2{font-size:19px;overflow-wrap:anywhere}.reference-preview-dialog .dialog-head p:not(.eyebrow){font-size:11px}.reference-preview-stage{display:flex;align-items:center;justify-content:center;background:var(--surface-muted);padding:22px;min-height:230px;height:min(52vh,440px);background-image:linear-gradient(45deg,#89958b07 25%,transparent 25%),linear-gradient(-45deg,#89958b07 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#89958b07 75%),linear-gradient(-45deg,transparent 75%,#89958b07 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.reference-preview-stage img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:5px;box-shadow:0 5px 18px #00000009}.reference-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 23px}.reference-preview-toolbar>div{display:flex;align-items:center;gap:8px}.reference-preview-paging>span{font-size:11px;color:var(--muted);min-width:37px;text-align:center}.reference-preview-toolbar button{font-size:11px}.reference-preview-toolbar .subtle{min-width:31px;min-height:31px}#referencePreviewMeta{min-height:16px}.upload-zone.is-dragging{border-color:#76937a;background:#eff5e9}.upload-status-announcement{position:absolute}
html[data-theme=dark] .upload-popover{box-shadow:0 20px 50px #0005}html[data-theme=dark] .upload-dropzone{background:#2a322a;border-color:#596a56}html[data-theme=dark] .upload-dropzone:hover{background:#303a2f}html[data-theme=dark] .upload-image-mark{background:#354030;border-color:#4d5d46;color:#b0c4a1}html[data-theme=dark] .upload-image-mark i{border-color:#2a322a}html[data-theme=dark] #attachButton[aria-expanded=true]{background:#303a2e;color:var(--ink);border-color:#687d60}html[data-theme=dark] #attachButton.has-images{color:#bdd5b6}html[data-theme=dark] .upload-feedback{background:#2b3527;color:#b1c6a6}html[data-theme=dark] .upload-feedback.is-error{background:#3c3026;color:#dfbb99}html[data-theme=dark] .composer-drop-overlay{background:#222e21f5;color:#c6dabb;border-color:#7b946e}html[data-theme=dark] .composer-drop-overlay span{color:#aebfa4}html[data-theme=dark] .add-reference-tile:hover{background:#303a2b}
@keyframes upload-reveal{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}}
@media(max-width:600px){#attachButton{font-size:12px;padding:0 11px;gap:5px}#attachButton svg{width:17px;height:17px}.upload-popover{width:min(310px,calc(100vw - 56px));padding:16px;bottom:calc(100% + 11px)}.upload-popover-head{margin-bottom:12px}.upload-dropzone{padding:16px 8px 13px;gap:8px}.upload-samples{margin-top:13px;padding-top:12px}.upload-sample-grid button{height:55px}.upload-samples>div:first-child{font-size:9px}.reference-preview-toolbar{padding:15px;flex-wrap:wrap;gap:15px}.reference-preview-toolbar>div:last-child{margin-left:auto}.reference-preview-stage{height:42vh;padding:15px}.image-reference-card{flex-basis:91px;width:91px}.image-reference-open img{height:76px}.add-reference-tile{flex-basis:68px;min-height:104px}.reference-tray{margin-top:6px}.upload-feedback{font-size:10px}.composer:has(.upload-popover:not([hidden])) .upload-popover{position:fixed;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);max-height:calc(100dvh - 36px);overflow:auto;animation:none;z-index:1001;box-shadow:0 20px 75px #18241940,0 0 0 100vmax #18241924}.composer:has(.upload-popover:not([hidden])){z-index:1000}}
@media(max-width:360px){#attachButton{font-size:11px;padding:0 9px}#attachButton svg{width:15px}.toolbar-left{gap:6px}.parameter-button{padding:0 9px;gap:7px}.submit-button{width:45px;min-width:45px}.reference-preview-toolbar .button-secondary,.reference-preview-toolbar .button-primary{padding:9px 10px}}
@media(prefers-reduced-motion:reduce){.upload-popover{animation:none}.upload-sample-grid img{transition:none}}
#workflowAttachments{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}#workflowAttachments .image-reference-card{flex:0 0 91px;width:91px}#workflowAttachments .image-reference-open img{height:74px}.composer .reference-tray[hidden]{display:none!important}
@media(min-width:601px){.upload-popover{position:fixed;bottom:auto;max-height:calc(100dvh - 28px);overflow:auto;transform-origin:top left}}
/* Keep the mascot resting over the composer when the upload panel is open. */
.reference-robot{z-index:14}