.ai-tab{color:var(--pop)!important}.ai-panel{gap:16px!important}.ai-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.ai-heading h3{font-size:24px;margin:4px 0 0}.ai-credit{flex:none;padding:7px 10px;border:1px solid var(--line);border-radius:999px;font-size:11px;color:var(--pop)}.ai-lead,.ai-status,.ai-details,.ai-consent,.ai-empty{font-size:13px;line-height:1.55;color:var(--muted);margin:0}.ai-panel form{display:grid;gap:14px}.ai-field{display:grid;gap:8px;font-size:14px;font-weight:650}.ai-field textarea{width:100%;box-sizing:border-box;min-height:115px;resize:vertical;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:14px;padding:14px;font:400 16px/1.5 var(--f-body,system-ui)}.ai-field textarea:focus-visible{outline:2px solid var(--pop);outline-offset:2px}.ai-styles{display:flex;flex-wrap:wrap;gap:8px}.ai-consent{display:flex;gap:10px;align-items:flex-start}.ai-consent input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--pop)}.ai-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.ai-photos:empty{display:none}.ai-photos>div{position:relative;aspect-ratio:1}.ai-photos img{width:100%;height:100%;object-fit:cover;border-radius:12px}.ai-photos button{position:absolute;right:3px;top:3px;width:30px;height:30px;border:0;border-radius:50%;background:#202127dc;color:white;font-size:23px;cursor:pointer}.ai-panel .error{color:#f38c98}.ai-details{border-top:1px solid var(--line);padding-top:12px}.ai-details summary{cursor:pointer;color:var(--ink)}.ai-details p{margin:8px 0 0}.ai-panel h4{margin:10px 0 0;font-size:17px}.ai-results{display:grid;gap:16px}.ai-result{display:grid;gap:9px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.ai-result>img{width:100%;max-height:340px;object-fit:contain;border-radius:10px;background:var(--tile)}.ai-result p{font-size:13px;line-height:1.45;margin:0;overflow-wrap:anywhere}.ai-result-status{color:var(--muted);font-size:12px;line-height:1.5}.ai-stage-note{font-size:11px;color:var(--muted);line-height:1.4;max-width:360px;margin:4px 0}.ai-panel .btn:disabled{opacity:.5;cursor:default}@media(max-width:760px){.ai-heading h3{font-size:21px}.ai-credit{font-size:10px}.ai-stage-note{grid-column:1/-1;font-size:10px}.ai-result>img{max-height:320px}.ai-panel .btn{min-height:44px}}
.ai-progress[hidden],.ai-feedback[hidden]{display:none!important}
.ai-progress{display:grid;gap:10px;padding:15px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);min-width:0}
.ai-progress-heading{display:flex;align-items:center;gap:9px;font-size:14px;line-height:1.45;color:var(--ink)}
.ai-progress-dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--pop);box-shadow:0 0 0 5px color-mix(in srgb,var(--pop) 12%,transparent)}
.ai-progress-track{height:5px;border-radius:99px;overflow:hidden;background:color-mix(in srgb,var(--pop) 14%,var(--surface));isolation:isolate}
.ai-progress-track>span{display:block;width:38%;height:100%;border-radius:inherit;background:var(--pop);animation:ai-wait-slide 2s ease-in-out infinite;will-change:transform}
.ai-progress p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.ai-progress[data-stage=processing]{border-color:color-mix(in srgb,var(--pop) 45%,var(--line))}
.ai-progress[data-stage=paused] .ai-progress-track>span{animation-play-state:paused;opacity:.5}
.ai-panel .btn[data-ai-pending=true]{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.ai-panel .btn[data-ai-pending=true]:hover{border-color:var(--pop)}
.ai-panel .btn.is-checking::before{content:"";display:inline-block;flex:none;width:13px;height:13px;margin-right:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ai-status-spin .8s linear infinite}
.constructor-shell .ai-feedback{gap:0;border:1px solid var(--line);border-radius:18px;background:var(--block);color:var(--block-ink);padding:13px 18px;max-width:min(420px,calc(100vw - 32px));box-sizing:border-box;line-height:1.45;text-align:center;pointer-events:none;bottom:calc(96px + env(safe-area-inset-bottom,0px));animation:ai-feedback-enter .2s ease-out}
.constructor-shell .ai-feedback.error{border-color:var(--bad);color:var(--bad)}
@keyframes ai-wait-slide{0%{transform:translateX(-110%)}100%{transform:translateX(370%)}}
@keyframes ai-status-spin{to{transform:rotate(360deg)}}
@keyframes ai-feedback-enter{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.ai-progress-track>span{animation:none;transform:translateX(80%);will-change:auto}.ai-panel .btn.is-checking::before,.constructor-shell .ai-feedback{animation:none}}
