/* ============================================================
   Survey Buddy — owl companion styles
   Completely isolated from survey.css
   ============================================================ */

/* ── Root container ──────────────────────────────────────── */

#buddy-root {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transform: translate(120px, 120px) scale(0.2) rotate(20deg);
  transition: none;
}

#buddy-root.buddy-visible { pointer-events: auto; }

/* ── Positions ───────────────────────────────────────────── */

#buddy-root.buddy-pos-right-middle {
  right: 16px;
  top: 50%;
  transform: translateY(-50%) translate(120px, 0) scale(0.2);
}
#buddy-root.buddy-pos-right-middle.buddy-visible {
  opacity: 1;
  transform: translateY(-50%);
}

#buddy-root.buddy-pos-right-top {
  right: 16px;
  top: 80px;
  transform: translate(120px, -120px) scale(0.2) rotate(20deg);
}
#buddy-root.buddy-pos-right-top.buddy-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0deg);
}

/* ── Speech bubble ───────────────────────────────────────── */

#buddy-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: white;
  color: #1a1a2e;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  padding: 8px 13px;
  border-radius: 14px 14px 4px 14px;
  white-space: nowrap;
  max-width: 200px;
  white-space: normal;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  opacity: 0;
  transform: scale(0.6) translateY(8px);
  transform-origin: bottom right;
  transition: opacity 0.22s, transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
  z-index: 51;
}
#buddy-bubble.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ── SVG size ────────────────────────────────────────────── */

#survey-buddy {
  overflow: visible;
  width: 110px;
  height: 147px;
  display: block;
}

/* ── Owl part base styles ────────────────────────────────── */

#owl-main      { transform-box: fill-box; transform-origin: 60px 88px; }

#owl-body,#owl-face,#owl-belly,
#owl-eye-l,#owl-eye-r,#owl-pupil-l,#owl-pupil-r,
#owl-beak,#owl-wing-l,#owl-wing-r,
#owl-tuft-l,#owl-tuft-r,
#owl-brow-l,#owl-brow-r { transform-box: fill-box; }

#owl-body   { fill:#00c9b1; stroke:#00a893; stroke-width:1.3; transform-origin:60px 84px; filter:drop-shadow(0 6px 8px rgba(0,0,0,0.3)); }
#owl-face   { fill:#72f2df; opacity:.95; }
#owl-belly  { fill:#fff7df; opacity:.96; }
#owl-eye-l,#owl-eye-r   { fill:white; transform-origin:center; }
#owl-pupil-l,#owl-pupil-r { fill:#123047; transform-origin:center; transition:transform 0.25s ease; }
.eye-shine  { fill:white; opacity:.9; }
#owl-beak   { transform-origin:60px 74px; }
.beak-top   { fill:#ffc928; }
.beak-mouth { fill:#8c3b1f; transform-origin:60px 78px; transform:scaleY(0.12); opacity:.75; transform-box:fill-box; }
.beak-bottom{ fill:#f28a1a; opacity:.95; transform-origin:60px 80px; transform:translateY(-3px) scaleY(0.35); transform-box:fill-box; }
#owl-wing-l,#owl-wing-r { fill:#00c9b1; stroke:#00a893; stroke-width:1.1; }
#owl-wing-l { transform-origin:31px 83px; }
#owl-wing-r { transform-origin:89px 83px; }
#owl-tuft-l,#owl-tuft-r { fill:#00c9b1; stroke:#00a893; stroke-width:1.1; transform-origin:center; }
#owl-foot-l,#owl-foot-r { fill:#ffc928; stroke:#f28a1a; stroke-width:.8; }
#owl-brow-l,#owl-brow-r { stroke:#123047; stroke-width:3; stroke-linecap:round; opacity:0; transform-origin:center; }
#owl-shadow { fill:rgba(0,0,0,.12); transform-origin:center; }

/* ── Blink ───────────────────────────────────────────────── */

#buddy-root.buddy-blink #owl-eye-l,
#buddy-root.buddy-blink #owl-eye-r { transform: scaleY(0.07); }

#buddy-root.buddy-happy-blink #owl-eye-l,
#buddy-root.buddy-happy-blink #owl-eye-r { transform: scaleY(0.1); fill: #00c9b1; }

/* ── Fly in / out keyframes ──────────────────────────────── */

@keyframes buddy-fly-in {
  0%   { transform: translate(140px,140px) scale(0.2) rotate(22deg); opacity: 0; }
  58%  { transform: translate(-10px,-14px) scale(1.09) rotate(-4deg); opacity: 1; }
  74%  { transform: translate(4px,7px)     scale(0.92) rotate(1deg); }
  88%  { transform: translate(-2px,-4px)   scale(1.03) rotate(0deg); }
  100% { transform: translate(0,0)         scale(1)    rotate(0deg); opacity: 1; }
}

@keyframes buddy-fly-out {
  0%   { transform: translate(0,0)          scale(1)    rotate(0deg); opacity: 1; }
  14%  { transform: translate(0,10px)       scale(1.06) rotate(0deg); }
  100% { transform: translate(200px,-200px) scale(0.15) rotate(32deg); opacity: 0; }
}

/* ── State: idle ─────────────────────────────────────────── */

.s-idle #owl-main   { animation: owl-float 2.8s ease-in-out infinite; }
.s-idle #owl-shadow { animation: owl-shadow 2.8s ease-in-out infinite; }

@keyframes owl-float  { 0%,100%{transform:translateY(0) scaleX(1) scaleY(1)} 50%{transform:translateY(-8px) scaleX(0.97) scaleY(1.03)} }
@keyframes owl-shadow { 0%,100%{transform:scaleX(1);opacity:.16} 50%{transform:scaleX(.72);opacity:.07} }

/* ── State: wave ─────────────────────────────────────────── */

.s-wave #owl-main   { animation: owl-float 2.8s ease-in-out infinite; }
.s-wave #owl-wing-r { animation: owl-wave-wing 0.52s ease-in-out 4; }
.s-wave #owl-tuft-r { animation: owl-tuft-lag  0.6s ease 3 0.1s; }
.s-wave #owl-shadow { animation: owl-shadow 2.8s ease-in-out infinite; }

@keyframes owl-wave-wing { 0%,100%{transform:rotate(0deg)} 25%{transform:rotate(-44deg) translateY(-5px)} 50%{transform:rotate(22deg)} 75%{transform:rotate(-32deg) translateY(-3px)} }
@keyframes owl-tuft-lag  { 0%,100%{transform:rotate(0)} 50%{transform:rotate(22deg) translateX(3px)} }

/* ── State: watch ────────────────────────────────────────── */

.s-watch #owl-main { animation: owl-float 3.4s ease-in-out infinite; }

/* ── State: clap ─────────────────────────────────────────── */

.s-clap #owl-main   { animation: owl-clap-jump 0.52s cubic-bezier(.2,.9,.3,1.1) 3; }
.s-clap #owl-wing-l { animation: owl-clap-l .28s ease-in-out 6; }
.s-clap #owl-wing-r { animation: owl-clap-r .28s ease-in-out 6; }
.s-clap #owl-eye-l,
.s-clap #owl-eye-r  { animation: owl-big-eyes .52s ease-in-out 3; }
.s-clap #owl-tuft-l { animation: owl-tuft-bounce .32s ease 5 .03s; }
.s-clap #owl-tuft-r { animation: owl-tuft-bounce .32s ease 5 .09s; }
.s-clap .beak-mouth  { animation: owl-beak-open .25s ease-in-out infinite alternate; }
.s-clap .beak-bottom { animation: owl-beak-low  .25s ease-in-out infinite alternate; }
.s-clap #owl-brow-l  { opacity:1; animation: owl-brow-happy  .52s ease 3; }
.s-clap #owl-brow-r  { opacity:1; animation: owl-brow-happyr .52s ease 3; }

@keyframes owl-clap-jump   { 0%{transform:translateY(0) scaleX(1) scaleY(1)} 12%{transform:translateY(9px) scaleX(1.19) scaleY(.77)} 38%{transform:translateY(-22px) scaleX(.87) scaleY(1.2)} 65%{transform:translateY(6px) scaleX(1.13) scaleY(.87)} 80%{transform:translateY(-7px) scaleX(.96) scaleY(1.04)} 100%{transform:translateY(0) scaleX(1) scaleY(1)} }
@keyframes owl-clap-l      { 0%,100%{transform:rotate(0)} 50%{transform:rotate(40deg) translateX(15px) translateY(-9px)} }
@keyframes owl-clap-r      { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-40deg) translateX(-15px) translateY(-9px)} }
@keyframes owl-big-eyes    { 0%,100%{transform:scale(1)} 40%,65%{transform:scale(1.22)} }
@keyframes owl-tuft-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px) rotate(16deg)} }
@keyframes owl-brow-happy  { 0%,100%{transform:rotate(0) translateY(0)} 50%{transform:rotate(-19deg) translateY(-5px)} }
@keyframes owl-brow-happyr { 0%,100%{transform:rotate(0) translateY(0)} 50%{transform:rotate(19deg)  translateY(-5px)} }
@keyframes owl-beak-open   { from{transform:scaleY(.12);opacity:.55} to{transform:scaleY(1);opacity:.9} }
@keyframes owl-beak-low    { from{transform:translateY(-3px) scaleY(.35)} to{transform:translateY(3px) scaleY(1)} }

/* ── State: think ────────────────────────────────────────── */

.s-think #owl-main  { animation: owl-think 1.6s ease-in-out infinite; }
.s-think #owl-brow-l,
.s-think #owl-brow-r { opacity: 1; }
.s-think #owl-brow-l { animation: owl-brow-think-l 1.6s ease-in-out infinite; }
.s-think #owl-brow-r { animation: owl-brow-think-r 1.6s ease-in-out infinite; }
.s-think #owl-tuft-r { animation: owl-tuft-think 0.55s ease .15s forwards; }

@keyframes owl-think        { 0%,100%{transform:rotate(0) translateY(0)} 40%,75%{transform:rotate(-11deg) translateY(-3px)} }
@keyframes owl-brow-think-l { 0%,100%{transform:rotate(0) translateY(0)} 40%,75%{transform:rotate(7deg) translateY(3px)} }
@keyframes owl-brow-think-r { 0%,100%{transform:rotate(0) translateY(0)} 40%,75%{transform:rotate(-22deg) translateY(-5px)} }
@keyframes owl-tuft-think   { 0%{transform:rotate(0)} 60%{transform:rotate(28deg) translateX(5px)} 100%{transform:rotate(20deg) translateX(3px)} }

/* ── State: talk ─────────────────────────────────────────── */

.s-talk #owl-main    { animation: owl-float 2.8s ease-in-out infinite; }
.s-talk .beak-mouth  { animation: owl-beak-open .25s ease-in-out infinite alternate; }
.s-talk .beak-bottom { animation: owl-beak-low  .25s ease-in-out infinite alternate; }
.s-talk #owl-brow-l  { animation: owl-brow-talk  .42s ease-in-out infinite; }
.s-talk #owl-brow-r  { animation: owl-brow-talkr .42s ease-in-out infinite .1s; }

@keyframes owl-brow-talk  { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-12deg) translateY(-3px)} }
@keyframes owl-brow-talkr { 0%,100%{transform:rotate(0)} 50%{transform:rotate(12deg)  translateY(-3px)} }