.web-companion { --companion-size: var(--studio-space-24,24px); position:absolute; left:15%; bottom:72px; width:var(--companion-size); height:var(--companion-size); pointer-events:none; z-index:2; }
/* A thin page-coloured halo keeps the actor legible over dark media (a phone screen, a photo). The shape's own shadow is clipped by its clip-path, so the halo lives on the unclipped wrapper. */
.web-companion { filter:drop-shadow(0 0 1px var(--studio-bg)) drop-shadow(0 0 1.5px var(--studio-bg)); }
.web-companion-shape { width:var(--companion-size); height:var(--companion-size); background:var(--studio-text); clip-path:polygon(50% 0,93.30127% 75%,6.69873% 75%); filter:drop-shadow(0 2px 1px var(--studio-divider)); transform-origin:50% 50%; transform:rotate(var(--companion-heading,0deg)) scale(var(--companion-scale,1)); animation:companion-breathe var(--companion-breathe-duration,3.8s) var(--studio-ease) infinite; }
.web-companion-shape.is-ball { background:var(--studio-color-rose-3); }
@keyframes companion-breathe { 0%,100%{transform:rotate(var(--companion-heading,0deg)) scale(var(--companion-scale,1))}50%{transform:translateY(-1px) rotate(var(--companion-heading,0deg)) scale(calc(var(--companion-scale,1) * (1 + var(--companion-breathe-amount,.065))),calc(var(--companion-scale,1) * (1 - var(--companion-breathe-amount,.065) * .6)))} }
.web-companion[data-gesture] .web-companion-shape { animation:none; }
@media(prefers-reduced-motion:reduce){.web-companion *{animation:none!important;transition:none!important}}
.studio-root.web-companion { background:transparent; }
.web-companion[data-pose] .web-companion-shape { animation:none; }

.web-companion[data-morphing] .web-companion-shape { animation:none; }
.web-companion[data-action-phase] .web-companion-shape { animation:none; }
/* Live agent mood character. Rhythm comes from --companion-breathe-*; these add personality. */
.web-companion[data-mood="confused"] .web-companion-shape { animation:companion-breathe var(--companion-breathe-duration,2.2s) var(--studio-ease) infinite, companion-sway 2.6s var(--studio-ease) infinite; }
.web-companion[data-mood="sleepy"] .web-companion-shape { opacity:.82; }
/* Small chat bubble that rides on the companion during an expression. */
.web-companion [data-companion-label] { position:absolute; left:calc(100% + 2px); bottom:calc(100% - 2px); padding:2px 7px; border-radius:999px; background:var(--studio-text); color:var(--studio-bg); font:var(--studio-weight-strong,600) 11px/16px 'Studio Inter',system-ui,sans-serif; white-space:nowrap; pointer-events:none; transform-origin:0% 100%; }
.web-companion [data-companion-tag] { position:absolute; left:calc(100% + 4px); top:calc(100% - 6px); padding:3px 8px; border-radius:999px; background:var(--studio-text); color:var(--studio-bg); font:var(--studio-weight-strong,600) 11px/16px 'Studio Inter',system-ui,sans-serif; white-space:nowrap; pointer-events:none; transform-origin:0% 0%; box-shadow:0 1px 3px rgb(0 0 0 / .12); }
.web-companion [data-companion-name] { position:absolute; left:calc(100% + 2px); top:calc(100% - 4px); padding:0 5px; border-radius:999px; background:var(--studio-bg); color:var(--studio-text-muted,var(--studio-text)); border:1px solid var(--studio-border,currentColor); font:500 10px/14px 'Studio Inter',system-ui,sans-serif; white-space:nowrap; pointer-events:none; opacity:.85; }
.web-companion:has([data-companion-tag]) [data-companion-name] { visibility:hidden; }
.web-companion[data-name-side="left"] [data-companion-name] { left:auto; right:calc(100% + 2px); }
.web-companion[data-tone="rose"] [data-companion-label] { background:var(--studio-color-rose-3); color:var(--studio-text); }
@keyframes companion-sway { 0%,100%{rotate:0deg}50%{rotate:-9deg} }
.web-companion[data-gesture] [data-companion-particle] { will-change:transform,opacity; }

.web-companion [data-companion-name]{display:none}
html[data-companion-debug] .web-companion [data-companion-name]{display:block}