/* bobeep characters — styles for bobeep-bots.js, or for any inline SVG from svg/.
   Theme with --bb-ink (outline, Agent 01 eyes), --bb-accent (Agent 02 eyes), --bb-face (inside
   the outline; transparent by default, white in playgrounds) and --bb-shadow. */

/* Face: colors, moods and eye direction (--bb-look-x / --bb-look-y, -1 to 1). */
.bb-face{display:block;width:100%;height:auto;overflow:visible}
.bb-face .bb-fill{fill:var(--bb-face,none)}
.bb-face .bb-outline,.bb-face--rounded .bb-eyes-open{fill:var(--bb-ink,#132744)}
.bb-face--rounded .bb-eyes-happy path{stroke:var(--bb-ink,#132744)}
.bb-face--pixel .bb-eyes-open,.bb-face--pixel .bb-eyes-happy path{fill:var(--bb-accent,#2659ff)}
.bb-eyes{transform:translate(calc(var(--bb-look-x,0) * 4px),calc(var(--bb-look-y,0) * 3px));transition:transform .2s cubic-bezier(.3,.7,.4,1)}
.bb-face--pixel .bb-eyes{transition-timing-function:steps(2,jump-end)}
.bb-eye{transform-box:fill-box;transform-origin:center}
.bb-face.is-closed .bb-eye{transform:scaleY(.2)}
.bb-face--pixel.is-closed .bb-eye{transform:scaleY(.25)}
.bb-face.is-happy .bb-eyes-open{visibility:hidden}
.bb-face.is-happy .bb-eyes-happy{visibility:visible}

/* Bot: face plus ground shadow. Sizes are multiples of 16px so the pixel face lands on whole pixels.
   --bb-foot is the gap (in viewBox units) between each outline and the bottom of its 64×48 canvas. */
.bb-bot{--bb-size:64px;--bb-u:calc(var(--bb-size) / 64);position:relative;display:inline-block;width:var(--bb-size);vertical-align:bottom;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.bb-bot--xs{--bb-size:32px}
.bb-bot--sm{--bb-size:48px}
.bb-bot--md{--bb-size:64px}
.bb-bot--lg{--bb-size:96px}
.bb-bot--xl{--bb-size:128px}
.bb-bot--2xl{--bb-size:192px}
.bb-bot--rounded{--bb-foot:3}
.bb-bot--pixel{--bb-foot:5}
.bb-bot__body{position:relative;transform-origin:50% calc(100% - var(--bb-foot) * var(--bb-u))}
.bb-bot__shadow{position:absolute;left:14%;right:14%;bottom:calc(var(--bb-foot) * var(--bb-u));height:calc(var(--bb-size) * .12);translate:0 50%;border-radius:50%;background:radial-gradient(closest-side,var(--bb-shadow,rgb(19 39 68 / .2)),transparent)}

/* Playground: a clipping overlay layer; bots stand on its bottom edge, raised by --bb-ground. */
.bb-playground{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bb-playground .bb-fill{fill:var(--bb-face,#fff)}
.bb-playground > .bb-bot{position:absolute;left:0;bottom:calc(var(--bb-ground,0px) - var(--bb-foot) * var(--bb-u))}
.bb-playground > .bb-bot > .bb-bot__body{will-change:translate,scale,rotate}
.bb-playground.is-interactive > .bb-bot{pointer-events:auto;cursor:pointer}