/* ink dot - layered module styles. prefixed vd-, no global selectors. */
.vd-dot{position:fixed;left:0;top:0;z-index:9992;width:72px;height:72px;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 4px 16px rgba(186,255,41,.65));touch-action:none}
.vd-dot .vd-char{width:100%;height:100%;overflow:visible}
.vd-char{overflow:visible}
.vd-float{animation:vdfloat 5s ease-in-out infinite}
@keyframes vdfloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.015)}}
.vd-boop{animation:vdboop .6s ease}
@keyframes vdboop{0%{transform:scale(1)}35%{transform:scale(1.12,.86)}65%{transform:scale(.94,1.08)}100%{transform:scale(1)}}
.vd-shake{animation:vdshake .4s ease}
@keyframes vdshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-3px)}}
.vd-dropbody{transform-origin:100px 178px;transition:transform .35s ease}
.vd-char[data-state="listening"] .vd-dropbody{transform:rotate(-8deg)}
.vd-char[data-state="speaking"] .vd-dropbody{transform:rotate(2deg) scale(1.02)}
.vd-char[data-state="connecting"] .vd-dropbody{transform:rotate(-3deg) scale(.97)}
.vd-char[data-state="nap"] .vd-dropbody{transform:rotate(6deg) translateY(3px)}
.vd-char[data-state="droop"] .vd-dropbody{transform:rotate(14deg) translateY(4px)}
.vd-char[data-state="listening"] .vd-halo,
.vd-char[data-state="connecting"] .vd-halo{opacity:.85;animation:vdpulse 1.6s ease-in-out infinite}
.vd-char[data-state="nap"] .vd-eye,
.vd-char[data-state="droop"] .vd-eye{transform:scaleY(.12)}
.vd-eye{transition:transform .07s ease}
@keyframes vdpulse{0%,100%{opacity:.85}50%{opacity:.3}}
.vd-tag{position:absolute;right:80px;top:-10px;z-index:9991;pointer-events:none;width:max-content;max-width:210px;text-align:right;color:#d8ff8a;font:13px/1.4 "Inter Tight",sans-serif;opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.vd-tag.vd-tag-on{opacity:1;transform:translateY(0)}
/* theme-adaptive ink */
.vd-dot.vd-on-light{filter:drop-shadow(0 4px 12px rgba(20,32,10,.35))}
.vd-dot.vd-on-light .vd-char .vd-body{stroke:#1e2f0a;fill:rgba(30,47,10,.08)}
.vd-dot.vd-on-light .vd-char .vd-mouth{stroke:#1e2f0a}
.vd-dot.vd-on-light .vd-char .vd-eyes{fill:#1e2f0a}
.vd-dot.vd-on-light .vd-char .vd-shine{stroke:rgba(30,47,10,.5)}
.vd-dot.vd-on-light .vd-char .vd-halo{stroke:#1e2f0a}
.vd-tag{background:rgba(11,13,9,.78);padding:5px 10px;border-radius:12px;border-bottom-right-radius:3px}
/* entrance: drops in and settles */
.vd-dot.vd-enter .vd-dropbody{animation:vdenter .85s cubic-bezier(.34,1.35,.44,1) both}
@keyframes vdenter{0%{transform:translateY(-44px) scale(.6);opacity:0}55%{transform:translateY(5px) scale(1.06,.9);opacity:1}75%{transform:translateY(-3px) scale(.96,1.05)}100%{transform:translateY(0) scale(1)}}
/* one-time "talk to me" cue: a slow breathing ring, gone forever after first tap */
.vd-dot.vd-cue::after{content:'';position:absolute;inset:-9px;border:2px solid rgba(186,255,41,.75);border-radius:50%;animation:vdcue 2.2s ease-out infinite;pointer-events:none}
.vd-dot.vd-on-light.vd-cue::after{border-color:rgba(30,47,10,.55)}
@keyframes vdcue{0%{transform:scale(.82);opacity:.9}100%{transform:scale(1.32);opacity:0}}
/* listening: eyes open wider, halo breathes (halo pulse already defined) */
.vd-char[data-state="listening"] .vd-eye{transform:scaleY(1.25)}
/* speaking: quicker halo */
.vd-char[data-state="speaking"] .vd-halo{opacity:.9;animation:vdpulse 1s ease-in-out infinite}