/* ---------- Scenepack AI widget ---------- */
.ai-fab{position:fixed;left:20px;bottom:20px;z-index:84;display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 20px 0 16px;border:0;border-radius:999px;background:var(--grad);color:#fff;font:700 .92rem var(--sans);cursor:pointer;box-shadow:0 18px 40px -16px color-mix(in srgb,var(--accent) 80%,transparent),0 2px 6px rgba(0,0,0,.18);transition:transform .4s var(--ease-spring),box-shadow .3s}
.ai-fab svg{width:22px;height:22px;fill:currentColor}
.ai-fab:hover{transform:translate3d(0,-3px,0) scale(1.03)}.ai-fab:active{transform:scale(.96)}
.ai-fab.is-open{transform:scale(.92);opacity:.0;pointer-events:none}
.ai-fab::after{content:"";position:absolute;inset:-5px;border-radius:inherit;border:2px solid color-mix(in srgb,var(--accent) 45%,transparent);animation:aiPulse 2.8s var(--ease-io) 2}
@keyframes aiPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
.ai-panel{position:fixed;left:20px;bottom:20px;z-index:85;width:min(420px,calc(100vw - 24px));height:min(640px,calc(100vh - 40px));display:flex;flex-direction:column;background:var(--panel);color:var(--text);border:1px solid var(--line2);border-radius:22px;box-shadow:0 40px 90px -30px rgba(10,40,120,.55);overflow:hidden;opacity:0;transform:translate3d(0,20px,0) scale(.97);transform-origin:0 100%;transition:opacity .22s var(--ease-out),transform .4s var(--ease-spring)}
.ai-panel[hidden]{display:none}
.ai-panel.open{opacity:1;transform:none}
.ai-head{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,var(--panel)),var(--panel));border-bottom:1px solid var(--line)}
.ai-logo,.ai-av{display:grid;place-items:center;flex:none;border-radius:12px;background:var(--grad);color:#fff}
.ai-logo{width:38px;height:38px}.ai-logo svg,.ai-av svg{width:60%;height:60%;fill:currentColor}
.ai-head b{display:block;font-size:1rem;letter-spacing:-.01em}.ai-head small{display:block;color:var(--muted);font-size:.76rem}
.ai-spacer{flex:1}
.ai-ic{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;transition:background var(--d-fast),color var(--d-fast)}
.ai-ic:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--text)}
.ai-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ai-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth;overscroll-behavior:contain}
.ai-msg{display:flex;gap:8px;align-items:flex-end;max-width:100%}
.ai-msg.ai-user{justify-content:flex-end}
.ai-av{width:28px;height:28px;border-radius:9px}
.ai-bubble{max-width:calc(100% - 38px);padding:11px 14px;border-radius:16px;font-size:.92rem;line-height:1.45;background:var(--bg);border:1px solid var(--line);border-bottom-left-radius:5px;overflow-wrap:anywhere}
.ai-user .ai-bubble{max-width:86%;background:var(--grad);color:#fff;border:0;border-radius:16px 16px 5px 16px}
.ai-bubble p{margin:0}
.ai-bubble p+.ai-res{margin-top:10px}
.ai-in{animation:aiIn .45s var(--ease-spring) both}
@keyframes aiIn{from{opacity:0;transform:translate3d(0,12px,0) scale(.97)}to{opacity:1;transform:none}}
.ai-dots{display:inline-flex;gap:4px;padding:5px 2px}.ai-dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:aiDot 1s var(--ease-io) infinite}
.ai-dots i:nth-child(2){animation-delay:.15s}.ai-dots i:nth-child(3){animation-delay:.3s}
@keyframes aiDot{0%,60%,100%{transform:translate3d(0,0,0);opacity:.4}30%{transform:translate3d(0,-5px,0);opacity:1}}
/* result card: thumbnail preview + Open button */
.ai-res{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:10px;margin-top:8px;background:var(--panel);border:1px solid var(--line);border-radius:14px;transition:border-color var(--d-fast),box-shadow var(--d-med),transform .35s var(--ease-out)}
.ai-res:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:var(--shadow-md);transform:translate3d(0,-2px,0)}
.ai-thumb{position:relative;display:block;width:96px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:linear-gradient(115deg,color-mix(in srgb,var(--h,#1f6bff) 40%,#071226),#071226)}
.ai-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out)}
.ai-res:hover .ai-thumb img{transform:scale(1.08)}
.ai-gen{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(115deg,color-mix(in srgb,var(--h) 45%,#06142e),#06142e)}
.ai-gen b{font:italic 800 1.7rem/1 var(--sans);color:transparent;-webkit-text-stroke:1.5px var(--h)}
.ai-res-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.ai-res-t{font-weight:700;font-size:.9rem;line-height:1.25;color:var(--text)}
.ai-res-t:hover{color:var(--accent)}
.ai-res-m{font:600 .7rem var(--mono);letter-spacing:.04em;color:var(--muted)}
.ai-where{font-size:.72rem;color:var(--muted);line-height:1.4}.ai-where i{font-style:normal;font-weight:700;color:var(--text)}
.ai-where a{color:var(--accent);font-weight:600}.ai-where a:hover{text-decoration:underline}
.ai-res-act{display:flex;gap:8px;align-items:center;margin-top:6px}
.ai-open{padding:7px 18px;font-size:.84rem;border-radius:10px}
.ai-heart{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);cursor:pointer;transition:transform .35s var(--ease-spring),border-color var(--d-fast)}
.ai-heart svg{width:16px;height:16px;fill:none;stroke:var(--text);stroke-width:2}
.ai-heart[aria-pressed=true]{border-color:var(--accent)}.ai-heart[aria-pressed=true] svg{fill:var(--accent);stroke:var(--accent)}
.ai-heart:hover{transform:scale(1.1)}
.ai-sugg{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 10px}
.ai-chip{padding:7px 13px;border-radius:999px;border:1px solid var(--line2);background:var(--bg2);color:var(--text);font:600 .78rem var(--sans);cursor:pointer;transition:border-color var(--d-fast),background var(--d-fast),transform .35s var(--ease-spring)}
.ai-chip:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg2));transform:translate3d(0,-2px,0)}
.ai-form{display:flex;gap:8px;padding:10px 14px 8px;border-top:1px solid var(--line)}
.ai-input{flex:1;min-width:0;padding:12px 16px;border:1px solid var(--line2);border-radius:14px;background:var(--bg2);color:var(--text);font:inherit;outline:none;transition:border-color var(--d-fast),box-shadow var(--d-fast)}
.ai-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.ai-send{width:46px;border:0;border-radius:14px;background:var(--grad);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .35s var(--ease-spring),box-shadow .3s}
.ai-send svg{width:20px;height:20px;fill:currentColor}.ai-send:hover{transform:scale(1.06);box-shadow:0 10px 24px -10px var(--accent)}.ai-send:active{transform:scale(.94)}
.ai-note{margin:0;padding:0 16px 12px;color:var(--muted);font-size:.7rem;line-height:1.35}
@media (max-width:640px){
  .ai-fab{left:12px;bottom:12px;height:48px;padding:0 16px 0 12px}.ai-fab-t{display:none}.ai-fab{width:48px;padding:0;justify-content:center}
  .ai-panel{left:6px;right:6px;bottom:6px;width:auto;height:min(86vh,680px);border-radius:20px}
  .ai-res{grid-template-columns:80px 1fr}.ai-thumb{width:80px}
}
@media (prefers-reduced-motion:reduce){.ai-fab::after,.ai-in,.ai-dots i{animation:none!important}.ai-panel{transition:none}}