/* Proper Three.js KIVO character canvas, replaces only companion art when active. */
#kivo-agent #kivo-model-canvas[hidden]{display:none!important}
#kivo-agent #kivo-model-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
#kivo-agent.kivo-model-active{width:163px}
#kivo-agent.kivo-model-active .kivo-face-button{width:160px;height:175px}
#kivo-agent.kivo-model-active #kivo-avatar{visibility:hidden}
#kivo-agent.kivo-model-active .kivo-tag{z-index:3}
#kivo-agent.kivo-model-active .kivo-menu,#kivo-agent.kivo-model-active .kivo-bubble{bottom:180px}
#kivo-agent.kivo-model-active[data-minimized=true]{width:57px}
#kivo-agent.kivo-model-active[data-minimized=true] .kivo-face-button{width:54px;height:54px}
#kivo-agent.kivo-model-active[data-minimized=true] #kivo-model-canvas{display:none!important}
#kivo-agent.kivo-model-active[data-minimized=true] #kivo-avatar{visibility:visible}
@media(max-width:780px){#kivo-agent.kivo-model-active{width:96px}#kivo-agent.kivo-model-active .kivo-face-button{width:96px;height:105px}#kivo-agent.kivo-model-active .kivo-menu,#kivo-agent.kivo-model-active .kivo-bubble{bottom:115px}}

/* When KIVO runs, move the actual WebGL model across the screen, not only the hidden 2D image. */
#kivo-agent.kivo-model-active.kivo-running[data-motion=on] .kivo-face-button{animation:kivo-dash 5.4s ease-in-out 1}
#kivo-agent.kivo-model-active #kivo-avatar{animation:none!important}
@media(prefers-reduced-motion:reduce){#kivo-agent.kivo-model-active.kivo-running .kivo-face-button{animation:none!important}}

/* User-selected 3D quality stays local, with explicit touch-friendly controls. */
#kivo-agent .kivo-quality{grid-column:1/-1;display:grid;gap:5px;margin-top:4px;font:750 12px/1.4 system-ui,sans-serif;color:var(--ka-fg)}
#kivo-agent .kivo-quality select{width:100%;min-height:44px;border:1px solid var(--ka-border);background:var(--ka-bg);color:var(--ka-fg);border-radius:9px;padding:8px;font:inherit;touch-action:manipulation}
#kivo-agent .kivo-quality select:focus-visible{outline:3px solid var(--ka-border);outline-offset:3px}

#kivo-agent .kivo-3d-quick{position:absolute;right:0;top:-2px;min-width:44px;min-height:44px;z-index:12;display:grid;place-items:center;background:var(--ka-bg);color:var(--ka-alt);border:2px solid var(--ka-border);border-radius:50%;font:900 12px system-ui,sans-serif;box-shadow:0 6px 15px #0006;cursor:pointer;touch-action:manipulation}
#kivo-agent .kivo-3d-quick[aria-pressed=true]{background:var(--ka-border);color:var(--ka-bg)}
#kivo-agent[data-minimized=true] .kivo-3d-quick{display:none}
#kivo-agent .kivo-3d-quick:focus-visible{outline:3px solid var(--ka-border);outline-offset:3px}
@media(max-width:780px){#kivo-agent .kivo-3d-quick{top:-6px;right:-4px;font-size:11px}}