/* v2-pixo.css — Pixo, the studio companion (assets/pixo/, see assets/pixo/README.md). Alpha PNG/WebP only — never a box behind him. */
.pxF{display:block;object-fit:contain;flex:none;pointer-events:none;user-select:none}
.otto .sp,#uOtto .pxF,#sbOtto .pxF,#hcOtto .sp{display:inline-flex;align-items:center;justify-content:center}
.otto .sp .pxF{width:26px;height:26px;margin:-4px 0}
#uOtto .pxF{width:20px;height:20px;margin:-3px 0}
#sbOtto .pxF{width:20px;height:20px;margin:-2px}
#hcOtto .sp .pxF{width:28px;height:28px}
.oHead .sp.pxAv{position:relative;width:52px;height:52px;margin:-8px -2px -8px -6px}
.pxAv img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .22s ease;pointer-events:none}
.pxAv img.off{opacity:0}
.pxAv{animation:pxBob 4.2s ease-in-out infinite}
@keyframes pxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.oMsg.otto{position:relative;margin-left:30px}
.oMsg.otto::before{content:"";position:absolute;left:-32px;bottom:-2px;width:26px;height:26px;background:url(assets/pixo/pixo-face-128.webp) center/contain no-repeat}
.oMsg.otto+.oMsg.otto::before{display:none}
.devCard .pxWork{width:120px;height:120px;margin:0 auto 6px;display:block;object-fit:contain;animation:pxBob 2.4s ease-in-out infinite}
/* Ask Pixo welcome: large animated Pixo */
.ocHero{position:relative;width:clamp(96px,min(52vw,26vh),200px);aspect-ratio:1;margin:0 auto 4px;animation:pxIn .7s cubic-bezier(.2,.9,.3,1.25) both}
.ocHero img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .3s ease;animation:pxFloat 4.6s ease-in-out .7s infinite;pointer-events:none;user-select:none}
.ocHero img.off{opacity:0}
.ocHero .ocGlow{position:absolute;left:22%;right:22%;bottom:2%;height:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(229,168,46,.35),transparent);animation:pxShadow 4.6s ease-in-out .7s infinite;z-index:-1}
.ocW.typing .ocHero{display:none}
/* chat mode: Pixo stays, small, and reacts (pixoState drives the frames) */
.ocW.chat .ocHero{width:72px;margin:0 auto -2px;animation:none}
.ocW.chat .ocHero img{animation:pxFloat 4.6s ease-in-out infinite}
.ocW.chat{position:sticky;top:-20px;z-index:2;background:#1b1b19;margin:-20px -20px 0;padding:14px 20px 10px}
/* bigger panel on desktop (phone = full screen in v2-mobile.css) */
@media (min-width:761px){.oPanel{width:min(560px,calc(100vw - 32px));height:min(780px,calc(100vh - 120px));bottom:84px}}
/* action card: Pixo proposes, user confirms */
.pxAct{align-self:flex-start;max-width:88%;margin-left:30px;display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid rgba(229,168,46,.45);border-radius:8px;background:#22201b;animation:ocIn .25s ease-out both}
.pxAct .k{font:600 10.5px/1 Inter,sans-serif;letter-spacing:.14em;color:var(--gold,#E5A82E)}
.pxAct b{font:600 14px/1.35 Inter,sans-serif;color:var(--tp,#F5F4F0)}
.pxAct .r{display:flex;gap:8px;align-items:center}
.pxAct button{height:34px;padding:0 14px;border-radius:8px;font:600 13px Inter,sans-serif;cursor:pointer}
.pxAct .y{border:0;background:linear-gradient(120deg,var(--gold,#E5A82E),var(--gold-b,#F0B93C));color:#242424}
.pxAct .n{border:1px solid rgba(245,244,240,.18);background:none;color:var(--ts,#B8B2A7)}
.pxAct .ok{font-size:12.5px;color:var(--ts,#B8B2A7)}.pxAct.done{border-color:rgba(245,244,240,.12)}
.ocW:has(.ocHero) .ocT,.ocW:has(.ocHero) .ocS{text-align:center}
@keyframes pxIn{from{opacity:0;transform:translateY(18px) scale(.82)}to{opacity:1;transform:none}}
@keyframes pxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pxShadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.82);opacity:.6}}
.pxEmpty{display:block;width:64px;height:64px;margin:0 auto 8px;object-fit:contain;pointer-events:none;animation:pxBob 4.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.pxEmpty,.pxAv,.devCard .pxWork,.ocHero,.ocHero img,.ocHero .ocGlow{animation:none}.pxAv img,.ocHero img{transition:none}}