/* Local image-AI apps: intake, stage with compare and brush overlay, settings panel. */
.ai-app{display:grid;gap:12px}
.ai-drop{display:grid;justify-items:center;gap:8px;padding:clamp(28px,7vw,64px) 20px;border:2px dashed var(--line-strong,var(--line));border-radius:18px;background:var(--surface);color:var(--text);text-align:center;cursor:pointer}
.ai-drop:hover,.ai-drop.is-over{border-color:var(--accent);background:var(--surface-2)}
.ai-drop:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.ai-drop strong{font-size:1.2rem}.ai-drop span{color:var(--muted);font-size:.95rem}
.ai-drop svg{width:44px;height:44px;color:var(--accent)}
.ai-local{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--success,var(--accent))!important}.ai-local svg{width:16px;height:16px}
.ai-work{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.ai-work[hidden]{display:none}
.ai-stage-col{display:grid;gap:8px;min-width:0}
.ai-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:200px;padding:8px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.ai-frame{position:relative;display:inline-block;max-width:100%;line-height:0}
#ai-canvas{display:block;max-width:100%;max-height:72vh;width:auto;height:auto;border-radius:8px}
#ai-canvas{box-shadow:0 2px 12px #0002}
.ai-overlay{position:absolute;inset:0;width:100%;height:100%;border-radius:8px;touch-action:none;cursor:crosshair}
.ai-progress{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}.ai-progress[hidden]{display:none}
.ai-progress progress{flex:1;height:10px;accent-color:var(--accent)}
.ai-replace{justify-self:start}
.ai-controls{display:grid;gap:12px}
.ai-group{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.ai-group h3{margin:0;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ai-field{display:grid;gap:4px;font-size:14px;font-weight:600}
.ai-field select,.ai-field input[type=color]{min-height:40px;border:1px solid var(--control-border,var(--line));border-radius:10px;background:var(--surface);color:var(--text);padding:4px 8px}
.ai-field input[type=color]{width:64px;padding:3px}
.ai-field input[type=range]{accent-color:var(--accent)}
.ai-check{display:flex;align-items:center;gap:8px;font-size:14px}
.ai-toggle,.ai-actions{display:flex;flex-wrap:wrap;gap:6px}
.ai-toggle .btn[aria-pressed=true],#ai-compare[aria-pressed=true]{background:var(--accent);color:var(--on-accent,#fff);border-color:var(--accent)}
.ai-hint{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.ai-disclaimer{padding:8px 10px;border-radius:10px;background:var(--warn-soft,var(--surface-2))}
.ai-swatches{display:flex;flex-wrap:wrap;gap:6px}
.ai-swatch{width:28px;height:28px;padding:0;border:1px solid #0003;border-radius:50%;background:var(--swatch);cursor:pointer}
.ai-swatch[data-bg-swatch="#ffffff"]{--swatch:#ffffff}.ai-swatch[data-bg-swatch="#f3f4f6"]{--swatch:#f3f4f6}.ai-swatch[data-bg-swatch="#111827"]{--swatch:#111827}.ai-swatch[data-bg-swatch="#2563eb"]{--swatch:#2563eb}.ai-swatch[data-bg-swatch="#0f766e"]{--swatch:#0f766e}.ai-swatch[data-bg-swatch="#f59e0b"]{--swatch:#f59e0b}.ai-swatch[data-bg-swatch="#ef4444"]{--swatch:#ef4444}.ai-swatch[data-bg-swatch="#fde2e4"]{--swatch:#fde2e4}.ai-swatch[data-bg-swatch="#dbeafe"]{--swatch:#dbeafe}
.ai-swatch:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ai-file-btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;cursor:pointer}
.ai-status{margin:0;min-height:1.4em;font-size:14px;color:var(--muted)}.ai-status.is-error{color:var(--danger)}
@media (max-width:860px){.ai-work{grid-template-columns:minmax(0,1fr)}#ai-canvas{max-height:60vh}}