/* ============================================================
   bob.css — seosath mascot widget
   All variables scoped to .bob-widget — zero global bleed.
   Desktop only: hidden below 1024 px via media query.
   ============================================================ */

/* ── Bob's design tokens — scoped, never bleed into :root ── */
.bob-widget {
  --bg-0:          #0c0a09;
  --bg-1:          #161311;
  --bg-2:          #211c19;
  --surface:       #2a2422;
  --line:          #3a322c;
  --accent:        #e85d2f;
  --accent-bright: #ff6b3d;
  --accent-warm:   #ff8a5c;
  --accent-deep:   #5a1f0b;
  --text:          #ebe7e3;
  --text-dim:      #8a807a;
  --skin:          #d4a378;
  --skin-shadow:   #b8865c;
  --hair:          #1a1614;
  --shirt:         #1f1a17;
  --shirt-dark:    #0f0c0a;

  /* ── Layout ── */
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 130px;
  height: 170px;
  z-index: 9999;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  /* ── Entrance: hidden until scroll triggers .is-visible ── */
  opacity: 0;
  transform: translateY(60px);
  pointer-events: none;
  transition: opacity .4s ease,
              transform .55s cubic-bezier(.34,1.56,.64,1);
}

/* Desktop only — completely hidden below 1024 px */
@media (max-width: 1023px) {
  .bob-widget { display: none !important; }
}

.bob-widget.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bob-widget svg { width:100%; height:100%; display:block; overflow:visible; }
.bob-widget:focus-visible { outline:2px solid var(--accent-bright); outline-offset:6px; border-radius:4px; }

/* Click ripple */
.bob-widget::after {
  content:''; position:absolute; top:50%; left:50%;
  width:0; height:0; border-radius:50%;
  background:radial-gradient(circle,rgba(232,93,47,.55),rgba(232,93,47,0) 70%);
  transform:translate(-50%,-50%); pointer-events:none; opacity:0;
}
.bob-widget.is-clicked::after { animation:bob-ripple .65s ease-out; }
@keyframes bob-ripple {
  0%   { width:30px;  height:30px;  opacity:.7; }
  100% { width:260px; height:260px; opacity:0;  }
}

/* ── Speech bubble ── */
.bob-bubble {
  position:absolute; bottom:calc(100% + 6px); left:0;
  transform:scale(.82); transform-origin:bottom left;
  background:var(--bg-1); color:var(--text); padding:7px 13px;
  border:1px solid var(--accent); border-radius:4px;
  font-family:'JetBrains Mono','Menlo',monospace;
  font-size:.78rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .22s ease-out, transform .32s cubic-bezier(.34,1.56,.64,1);
}
.bob-bubble::after {
  content:''; position:absolute; top:100%; left:65px;
  width:9px; height:9px; background:var(--bg-1);
  border-right:1px solid var(--accent); border-bottom:1px solid var(--accent);
  transform:translate(-50%,-50%) rotate(45deg);
}
.bob-widget:hover .bob-bubble,
.bob-widget:focus-visible .bob-bubble { opacity:1; transform:scale(1); }

/* ── Idle animations ── */
.bob-body-breathe {
  transform-box:fill-box; transform-origin:50% 100%;
  animation:bob-breathe 3s ease-in-out infinite alternate;
}
@keyframes bob-breathe { from{transform:scaleY(1);} to{transform:scaleY(1.018);} }

.bob-head-bob {
  transform-box:fill-box; transform-origin:50% 95%;
  animation:bob-head .32s ease-in-out infinite alternate;
}
@keyframes bob-head { from{transform:rotate(0deg);} to{transform:rotate(1.3deg);} }

.bob-cable {
  transform-box:fill-box; transform-origin:top center;
  animation:bob-cable-wave 2.4s ease-in-out infinite alternate;
}
@keyframes bob-cable-wave { from{transform:skewX(-2.5deg);} to{transform:skewX(2.5deg);} }

.bob-bar { transform-box:fill-box; transform-origin:bottom center; animation:bob-eq var(--speed) ease-in-out infinite alternate; }
.bar-1{--speed:.40s;} .bar-2{--speed:.60s;} .bar-3{--speed:.30s;} .bar-4{--speed:.50s;} .bar-5{--speed:.70s;}
@keyframes bob-eq { from{transform:scaleY(.20);} to{transform:scaleY(1.00);} }

.bob-progress { transform-box:fill-box; transform-origin:left center; animation:bob-progress 210s linear infinite; }
@keyframes bob-progress { from{transform:scaleX(0);} to{transform:scaleX(1);} }

.bob-song { animation:bob-song-scroll 8s linear infinite; }
@keyframes bob-song-scroll { from{transform:translateX(28px);} to{transform:translateX(-95px);} }

.bob-album { transform-box:fill-box; transform-origin:center; animation:bob-album-rotate 18s linear infinite; }
@keyframes bob-album-rotate { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

.bob-key { fill:#2a2422; transition:fill .12s; }
.bob-key-1{--kd:0s;} .bob-key-2{--kd:.18s;} .bob-key-3{--kd:.37s;}
.bob-key-4{--kd:.54s;} .bob-key-5{--kd:.72s;} .bob-key-6{--kd:.9s;} .bob-key-7{--kd:.08s;}
.bob-widget.is-typing .bob-key { animation:key-light 2.8s ease-in-out var(--kd,0s) infinite; }
@keyframes key-light { 0%,45%,100%{fill:#2a2422;} 22%{fill:#4a4038;} }

.crt-cursor-blink { animation:cursor-blink .85s step-end infinite; }
@keyframes cursor-blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

.crt-led { animation:led-pulse 3s ease-in-out infinite alternate; }
@keyframes led-pulse { from{opacity:.7;} to{opacity:1;} }

/* ── Sleep states ── */
.crt-eyelid-l, .crt-eyelid-r {
  transform-box:fill-box; transform-origin:50% 0%;
  transform:scaleY(0); transition:transform 1.8s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.bob-widget.is-drowsy .crt-eyelid-l,
.bob-widget.is-drowsy .crt-eyelid-r { transform:scaleY(.45); }
.bob-widget.is-drowsy .bob-head-bob { animation:bob-head-drowsy 5s ease-in-out infinite alternate !important; }
@keyframes bob-head-drowsy { from{transform:rotate(0deg);} to{transform:rotate(3deg) translateY(1.5px);} }

.bob-widget.is-dozing .crt-eyelid-l,
.bob-widget.is-dozing .crt-eyelid-r { transform:scaleY(.82); }
.bob-widget.is-dozing .bob-head-bob { animation:bob-head-doze 7s ease-in-out infinite alternate !important; }
@keyframes bob-head-doze { from{transform:rotate(3deg) translateY(2px);} to{transform:rotate(7deg) translateY(5px);} }
.bob-widget.is-dozing .bob-bar { animation-duration:calc(var(--speed) * 4) !important; }

.bob-widget.is-asleep .crt-eyelid-l,
.bob-widget.is-asleep .crt-eyelid-r { transform:scaleY(1); }
.bob-widget.is-asleep .bob-head-bob { animation:bob-head-sleep 9s ease-in-out infinite alternate !important; }
@keyframes bob-head-sleep { from{transform:rotate(6deg) translateY(4px);} to{transform:rotate(8deg) translateY(6px);} }
.bob-widget.is-asleep .bob-bar  { animation-play-state:paused !important; }
.bob-widget.is-asleep .bob-key  { animation:none !important; }
.bob-widget.is-asleep .bob-body-breathe { animation:bob-breathe 6s ease-in-out infinite alternate !important; }

.crt-zzz { opacity:0; transform-box:fill-box; transform-origin:50% 100%; }
.bob-widget.is-asleep .crt-zzz-1 { animation:zzz-float 3.2s ease-out 0s    infinite; }
.bob-widget.is-asleep .crt-zzz-2 { animation:zzz-float 3.2s ease-out 1.07s infinite; }
.bob-widget.is-asleep .crt-zzz-3 { animation:zzz-float 3.2s ease-out 2.14s infinite; }
@keyframes zzz-float {
  0%  {opacity:0; transform:translate(0,0) scale(.5);}
  15% {opacity:.9;}
  85% {opacity:.55;}
  100%{opacity:0; transform:translate(-5px,-22px) scale(1.15);}
}

.bob-widget.is-waking .crt-eyelid-l,
.bob-widget.is-waking .crt-eyelid-r { transform:scaleY(0) !important; transition-duration:.08s !important; }
.bob-widget.is-waking .bob-head-bob { animation:bob-wake-jolt .6s cubic-bezier(.34,1.56,.64,1) forwards !important; }
@keyframes bob-wake-jolt {
  0%  {transform:rotate(7deg) translateY(5px);}
  25% {transform:rotate(-3.5deg) translateY(-5px);}
  55% {transform:rotate(1.5deg) translateY(1px);}
  80% {transform:rotate(-.5deg);}
  100%{transform:rotate(0deg) translateY(0);}
}
.bob-widget.is-waking .bob-eyes-surprised,
.bob-widget.is-waking .bob-mouth-surprised { opacity:1 !important; }
.bob-widget.is-waking .bob-eyes-relaxed,
.bob-widget.is-waking .bob-mouth-relaxed   { opacity:0 !important; }

/* ── Click face reaction ── */
.crt-screen-flash  { opacity:0; pointer-events:none; }
.crt-reaction-mark { opacity:0; transform-box:fill-box; transform-origin:bottom center; }
.bob-widget.is-face-react .crt-screen-flash { animation:crt-flash .45s ease-out forwards; }
@keyframes crt-flash { 0%{opacity:0;} 12%{opacity:.6;} 100%{opacity:0;} }
.bob-widget.is-face-react .crt-reaction-mark { animation:reaction-pop .75s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes reaction-pop {
  0%  {opacity:0; transform:translateY(0) scale(.4);}
  25% {opacity:1; transform:translateY(-6px) scale(1.15);}
  60% {opacity:1; transform:translateY(-11px) scale(1);}
  100%{opacity:0; transform:translateY(-16px) scale(.7);}
}
.bob-widget.is-face-react .bob-eyes-happy      { opacity:1 !important; }
.bob-widget.is-face-react .bob-eyes-relaxed,
.bob-widget.is-face-react .bob-eyes-surprised,
.bob-widget.is-face-react .bob-mouth-relaxed,
.bob-widget.is-face-react .bob-mouth-surprised { opacity:0 !important; }
.bob-widget.is-face-react .crt-eyelid-l,
.bob-widget.is-face-react .crt-eyelid-r { transform:scaleY(0) !important; transition-duration:.05s !important; }
.bob-widget.is-face-react .bob-head-bob { animation:monitor-jiggle .38s ease-out forwards !important; }
@keyframes monitor-jiggle {
  0%  {transform:rotate(0deg);}
  20% {transform:rotate(-2.8deg);}
  45% {transform:rotate(2.2deg);}
  70% {transform:rotate(-1deg);}
  100%{transform:rotate(0deg);}
}

/* ── Hover ── */
.bob-headphones { transform-box:fill-box; transform-origin:50% 100%; transition:transform .34s cubic-bezier(.42,0,.4,1.18), opacity .30s ease-out; }
.bob-widget:hover .bob-headphones,
.bob-widget:focus-visible .bob-headphones { transform:translate(10px,-38px) rotate(30deg); opacity:0; }

.bob-eyes-relaxed, .bob-eyes-surprised, .bob-eyes-happy,
.bob-mouth-relaxed, .bob-mouth-surprised { transition:opacity .18s ease; }
.bob-eyes-surprised, .bob-mouth-surprised,
.bob-eyes-happy { opacity:0; }
.bob-widget:hover .bob-eyes-relaxed,
.bob-widget:hover .bob-mouth-relaxed,
.bob-widget:focus-visible .bob-eyes-relaxed,
.bob-widget:focus-visible .bob-mouth-relaxed { opacity:0; }
.bob-widget:hover .bob-eyes-surprised,
.bob-widget:hover .bob-mouth-surprised,
.bob-widget:focus-visible .bob-eyes-surprised,
.bob-widget:focus-visible .bob-mouth-surprised { opacity:1; }

.bob-widget:hover .bob-bar,
.bob-widget:hover .bob-progress,
.bob-widget:hover .bob-song,
.bob-widget:hover .bob-album,
.bob-widget:hover .bob-cable,
.bob-widget:focus-visible .bob-bar,
.bob-widget:focus-visible .bob-progress,
.bob-widget:focus-visible .bob-song,
.bob-widget:focus-visible .bob-album,
.bob-widget:focus-visible .bob-cable { animation-play-state:paused; }
.bob-widget:hover .bob-head-bob,
.bob-widget:focus-visible .bob-head-bob { animation:bob-head-up .32s ease-out forwards; }
@keyframes bob-head-up { to{transform:translateY(-3px);} }

/* ── Blink ── */
@keyframes bob-blink { 0%,100%{transform:scaleY(0);} 35%,65%{transform:scaleY(1);} }
.bob-widget.is-blinking .crt-eyelid-l,
.bob-widget.is-blinking .crt-eyelid-r { animation:bob-blink .16s ease-in-out forwards !important; transition:none !important; }

/* ── Scroll dizzy ── */
.bob-widget.is-scroll-react .bob-head-bob { animation:scroll-dizzy .55s ease-out forwards !important; }
@keyframes scroll-dizzy {
  0%  {transform:rotate(0);}
  18% {transform:rotate(-4deg) translateY(-3px);}
  48% {transform:rotate(4deg) translateY(2px);}
  75% {transform:rotate(-1.5deg);}
  100%{transform:rotate(0);}
}
.bob-widget.is-scroll-react .bob-eyes-surprised,
.bob-widget.is-scroll-react .bob-mouth-surprised { opacity:1 !important; }
.bob-widget.is-scroll-react .bob-eyes-relaxed,
.bob-widget.is-scroll-react .bob-mouth-relaxed   { opacity:0 !important; }

/* ── Hover discomfort ── */
.crt-sweat { opacity:0; transition:opacity .4s; }
.bob-widget.is-nervous .crt-sweat { opacity:1; }
.crt-sweat-drop { transform-box:fill-box; transform-origin:top center; animation:sweat-drip 1.5s ease-in infinite; }
.crt-sweat-drop-b { animation-delay:.65s; }
@keyframes sweat-drip {
  0%  {transform:translateY(0) scaleY(1); opacity:1;}
  70% {transform:translateY(5px) scaleY(1.3); opacity:.7;}
  100%{transform:translateY(9px) scaleY(.4); opacity:0;}
}
.bob-widget.is-nervous .bob-head-bob { animation:bob-nervous 1.6s ease-in-out infinite !important; }
@keyframes bob-nervous {
  0%  {transform:rotate(0);}
  22% {transform:rotate(-2.5deg) translateX(-1.5px);}
  48% {transform:rotate(2.5deg) translateX(1.5px);}
  72% {transform:rotate(-1deg);}
  100%{transform:rotate(0);}
}
.bob-widget.is-nervous .bob-eyes-surprised { opacity:1 !important; }
.bob-widget.is-nervous .bob-eyes-relaxed   { opacity:0 !important; }

/* ── Morning coffee ── */
.crt-coffee { opacity:0; transition:opacity 1.2s ease; }
.bob-widget.is-morning .crt-coffee { opacity:1; }
.crt-steam { transform-box:fill-box; transform-origin:bottom center; animation:steam-up 2.2s ease-out infinite; }
.crt-steam-b { animation-delay:.75s; }
@keyframes steam-up {
  0%  {opacity:0; transform:translateY(0) scaleX(1);}
  25% {opacity:.7;}
  75% {opacity:.2;}
  100%{opacity:0; transform:translateY(-7px) scaleX(1.6);}
}

/* ── Screensaver ── */
.crt-ss-content { opacity:0; transition:opacity 1s ease; }
.bob-widget.is-screensaver .crt-ss-content { opacity:1; }
.bob-widget.is-screensaver .crt-zzz-1,
.bob-widget.is-screensaver .crt-zzz-2,
.bob-widget.is-screensaver .crt-zzz-3 { animation:none !important; opacity:0 !important; }

/* ── Konami party mode ── */
.bob-widget.is-konami .bob-bar {
  animation:konami-pump .18s ease-in-out infinite alternate,
            konami-colors 1s linear infinite !important;
}
@keyframes konami-pump { from{transform:scaleY(.3);} to{transform:scaleY(1.5);} }
@keyframes konami-colors {
  0%{fill:#e85d2f;} 16%{fill:#f0c040;}
  33%{fill:#40d060;} 50%{fill:#40b8f0;}
  66%{fill:#9040f0;} 83%{fill:#f04080;}
  100%{fill:#e85d2f;}
}
.bob-widget.is-konami .bob-head-bob { animation:konami-bounce .28s ease-in-out infinite alternate !important; }
@keyframes konami-bounce { from{transform:rotate(-6deg) translateY(0);} to{transform:rotate(6deg) translateY(-6px);} }
.bob-widget.is-konami .bob-body-breathe { animation:konami-shimmy .38s ease-in-out infinite alternate !important; }
@keyframes konami-shimmy { from{transform:scaleY(1) translateX(-1.5px);} to{transform:scaleY(1.03) translateX(1.5px);} }
.crt-konami-flash { opacity:0; pointer-events:none; }
.bob-widget.is-konami .crt-konami-flash { animation:konami-screen .6s linear infinite; }
@keyframes konami-screen {
  0%,100%{opacity:0; fill:#e85d2f;}
  20%{opacity:.18; fill:#f0c040;}
  40%{opacity:0; fill:#40d060;}
  60%{opacity:.14; fill:#40b8f0;}
  80%{opacity:0;}
}
/* Party face: ^^ eyes, wide smile, eyelids open, glow pulse */
.bob-widget.is-konami .bob-eyes-happy      { opacity:1 !important; }
.bob-widget.is-konami .bob-eyes-relaxed,
.bob-widget.is-konami .bob-eyes-surprised  { opacity:0 !important; }
.bob-widget.is-konami .crt-eyelid-l,
.bob-widget.is-konami .crt-eyelid-r        { transform:scaleY(0) !important; transition-duration:.05s !important; }
@keyframes party-eye-glow {
  from{filter:brightness(1) drop-shadow(0 0 0px #f0c040);}
  to  {filter:brightness(1.35) drop-shadow(0 0 4px #f0c040);}
}
.bob-widget.is-konami .bob-eyes-happy { animation:party-eye-glow .25s ease-in-out infinite alternate; }
.bob-widget.is-konami.is-blinking .crt-eyelid-l,
.bob-widget.is-konami.is-blinking .crt-eyelid-r { animation:none !important; }

/* ── Ctrl+C / Ctrl+V ── */
.bob-widget.is-copying .bob-head-bob { animation:bob-sneak .5s ease-out forwards !important; }
@keyframes bob-sneak {
  0%  {transform:rotate(0);}
  30% {transform:rotate(-3deg) translateX(-2px);}
  100%{transform:rotate(-2deg) translateX(-1.5px);}
}
.bob-widget.is-copying .crt-pupil-l,
.bob-widget.is-copying .crt-pupil-r { transform-box:fill-box; transform:translateX(-2px) !important; }

.bob-widget.is-pasting .bob-head-bob { animation:bob-nod-v .55s ease-out forwards !important; }
@keyframes bob-nod-v {
  0%  {transform:rotate(0);}
  25% {transform:rotate(3deg) translateY(3px);}
  60% {transform:rotate(-1deg) translateY(1px);}
  100%{transform:rotate(0);}
}
.bob-widget.is-pasting .crt-pupil-l,
.bob-widget.is-pasting .crt-pupil-r { transform-box:fill-box; transform:translateX(2px) !important; }

/* ── On-screen notification ── */
#crt-screen-msg { opacity:0; pointer-events:none; transform-box:fill-box; transform-origin:50% 100%; }
.bob-widget.is-screen-msg #crt-screen-msg { animation:screen-msg-pop 3s ease-out forwards; }
@keyframes screen-msg-pop {
  0%  {opacity:0; transform:translateY(3px) scale(.82);}
  10% {opacity:1; transform:translateY(0) scale(1);}
  75% {opacity:1;}
  100%{opacity:0;}
}

/* ── Forced bubble visibility ── */
.bob-widget.is-talking .bob-bubble { opacity:1 !important; transform:scale(1) !important; }

/* ── Light mode ── */
.bob-widget.is-light-mode #crt-screen-group { filter:brightness(1.7) saturate(.5) sepia(.12); }

/* ── Right-click suspicious ── */
.bob-widget.is-suspicious .bob-head-bob { animation:bob-squint .5s ease-out forwards !important; }
@keyframes bob-squint {
  0%  {transform:rotate(0);}
  35% {transform:rotate(-2.5deg) translateX(-1.5px);}
  100%{transform:rotate(-2deg) translateX(-1px);}
}
.bob-widget.is-suspicious .crt-eyelid-l,
.bob-widget.is-suspicious .crt-eyelid-r { transform:scaleY(.38) !important; transition-duration:.18s !important; }
.bob-widget.is-suspicious .crt-pupil-l,
.bob-widget.is-suspicious .crt-pupil-r  { transform-box:fill-box; transform:translateX(-1.5px) !important; }

/* ── Double-click dance ── */
.bob-widget.is-dancing .bob-head-bob { animation:dance-bop .22s ease-in-out infinite alternate !important; }
@keyframes dance-bop { from{transform:rotate(-7deg) translateY(0);} to{transform:rotate(7deg) translateY(-5px);} }
.bob-widget.is-dancing .bob-body-breathe { animation:dance-shimmy .22s ease-in-out infinite alternate !important; }
@keyframes dance-shimmy { from{transform:scaleY(1) translateX(-2px);} to{transform:scaleY(1.03) translateX(2px);} }
.bob-widget.is-dancing .bob-bar { animation-duration:calc(var(--speed) * .3) !important; }
.bob-widget.is-dancing .bob-eyes-surprised { opacity:1 !important; }
.bob-widget.is-dancing .bob-eyes-relaxed   { opacity:0 !important; }

/* ── Day of week ── */
.bob-widget.is-monday .crt-eyelid-l,
.bob-widget.is-monday .crt-eyelid-r { transform:scaleY(.22) !important; transition:transform 4s ease-out !important; }
.bob-widget.is-friday .bob-bar { animation-duration:calc(var(--speed) * .55) !important; }
.bob-widget.is-friday .bob-head-bob { animation:bob-head .18s ease-in-out infinite alternate !important; }

/* ── Offline ── */
.crt-offline-overlay { opacity:0; transition:opacity .6s; pointer-events:none; }
.bob-widget.is-offline .crt-offline-overlay { opacity:1; }
.bob-widget.is-offline .bob-eyes-relaxed   { opacity:0   !important; }
.bob-widget.is-offline .bob-eyes-surprised { opacity:.85 !important; }

/* ── Disco ball ── */
#crt-disco-ball { transform:translateY(-185px) scale(.3); opacity:0; }
.bob-widget.is-konami #crt-disco-ball {
  animation:disco-drop .9s cubic-bezier(.34,1.56,.64,1) forwards,
            disco-rise .55s ease-in 3.3s forwards;
}
@keyframes disco-drop { from{transform:translateY(-185px) scale(.3); opacity:0;} 40%{opacity:1;} to{transform:translateY(0) scale(1); opacity:1;} }
@keyframes disco-rise  { from{transform:translateY(0) scale(1); opacity:1;} to{transform:translateY(-185px) scale(.3); opacity:0;} }
.disco-tiles-spin { transform-box:fill-box; transform-origin:50% 50%; }
.bob-widget.is-konami .disco-tiles-spin { animation:disco-spin 1.8s linear infinite; }
@keyframes disco-spin { to{transform:rotate(360deg);} }
.disco-ray { opacity:0; transform-box:fill-box; transform-origin:50% 50%; }
.bob-widget.is-konami .disco-ray { animation:ray-out 1.1s ease-out infinite; }
.bob-widget.is-konami .r1{animation-delay:0s;   --rx:-44px;--ry:-26px;}
.bob-widget.is-konami .r2{animation-delay:.14s; --rx:0px;  --ry:-48px;}
.bob-widget.is-konami .r3{animation-delay:.28s; --rx:44px; --ry:-26px;}
.bob-widget.is-konami .r4{animation-delay:.42s; --rx:50px; --ry:0px;  }
.bob-widget.is-konami .r5{animation-delay:.56s; --rx:36px; --ry:36px; }
.bob-widget.is-konami .r6{animation-delay:.70s; --rx:0px;  --ry:50px; }
.bob-widget.is-konami .r7{animation-delay:.84s; --rx:-50px;--ry:0px;  }
.bob-widget.is-konami .r8{animation-delay:.98s; --rx:-36px;--ry:36px; }
@keyframes ray-out {
  0%  {opacity:0; transform:translate(0,0) scale(1.2);}
  12% {opacity:1;}
  85% {opacity:.6;}
  100%{opacity:0; transform:translate(var(--rx),var(--ry)) scale(.2);}
}

/* ── Confetti ── */
.conf-piece { opacity:0; transform-box:fill-box; transform-origin:50% 50%; }
.bob-widget.is-confetti .conf-piece { animation:conf-fall 3.2s ease-in var(--cd,0s) forwards; }
@keyframes conf-fall {
  0%  {opacity:0; transform:translateY(0) rotate(0deg);}
  7%  {opacity:1;}
  93% {opacity:.9;}
  100%{opacity:0; transform:translateY(185px) rotate(720deg);}
}

/* ── Typing react ── */
.bob-widget.is-typing-react .bob-head-bob { animation:type-lean .35s ease-in-out infinite alternate !important; }
@keyframes type-lean { from{transform:rotate(-.8deg) translateY(0);} to{transform:rotate(1.2deg) translateY(1px);} }

/* ── Battery low ── */
.bob-widget.is-battery-low .bob-eyes-relaxed   { opacity:0 !important; }
.bob-widget.is-battery-low .bob-eyes-surprised { opacity:.75 !important; }
.bob-widget.is-battery-low .crt-sweat          { opacity:1; }
.bob-widget.is-battery-low .bob-head-bob       { animation:battery-droop 5s ease-in-out infinite alternate !important; }
@keyframes battery-droop { from{transform:rotate(0);} to{transform:rotate(2.5deg) translateY(2px);} }

/* ── Christmas hat ── */
.crt-xmas-hat { opacity:0; transition:opacity 1.2s ease; }
.bob-widget.is-xmas .crt-xmas-hat { opacity:1; }

/* ── Contact panel ── */
.bob-panel {
  position:absolute; bottom:calc(100% + 14px); left:0; width:236px;
  background:var(--bg-1); border:1px solid var(--accent); border-radius:4px;
  padding:14px 16px 16px; opacity:0; transform:translateY(10px) scale(.95);
  transform-origin:bottom left; pointer-events:none;
  transition:opacity .24s ease-out, transform .34s cubic-bezier(.34,1.56,.64,1);
  z-index:10;
}
.bob-panel.is-open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.bob-panel::after {
  content:''; position:absolute; top:100%; left:22px;
  width:10px; height:10px; background:var(--bg-1);
  border-right:1px solid var(--accent); border-bottom:1px solid var(--accent);
  transform:translate(0,-50%) rotate(45deg);
}
.bob-panel__close {
  position:absolute; top:8px; right:9px; background:none; border:none;
  color:var(--text-dim); cursor:pointer; font-size:.95rem; line-height:1;
  padding:3px 6px; transition:color .15s;
}
.bob-panel__close:hover { color:var(--text); }
.bob-panel__head { font-size:.82rem; color:var(--text); line-height:1.5; margin:0 22px 13px 0; }
.bob-panel__opts { display:flex; flex-direction:column; gap:5px; }
.bob-opt {
  display:flex; align-items:center; gap:10px; text-decoration:none;
  padding:8px 10px; border:1px solid var(--line); border-radius:3px;
  transition:border-color .18s, background .18s;
}
.bob-opt:hover { border-color:var(--accent); background:rgba(232,93,47,.06); }
.bob-opt__tag {
  font-family:'JetBrains Mono','Menlo',monospace; font-size:.63rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent-bright);
  white-space:nowrap; min-width:52px;
}
.bob-opt__val { font-size:.76rem; color:var(--text-dim); line-height:1.3; }

/* ── Dismiss button ── */
.bob-dismiss {
  position:absolute; top:-9px; right:-9px;
  width:20px; height:20px; border-radius:50%;
  background:var(--bg-2); border:1px solid var(--line);
  color:var(--text-dim); cursor:pointer; font-size:.75rem; line-height:1;
  display:flex; align-items:center; justify-content:center; padding:0;
  opacity:0; pointer-events:none; z-index:10001;
  transition:opacity .2s ease, background .15s, color .15s;
}
.bob-widget.is-visible .bob-dismiss { opacity:.6; pointer-events:auto; }
.bob-widget.is-visible .bob-dismiss:hover { opacity:1; background:var(--surface); color:var(--text); }

/* ── Dismissed exit ── */
.bob-widget.is-dismissed {
  opacity:0 !important; transform:translateY(60px) !important; pointer-events:none !important;
  transition:opacity .35s ease, transform .45s ease !important;
}

/* ── WhatsApp float ── */
.bob-wa-float {
  position:fixed; right:24px; top:50%; transform:translateY(-50%) translateX(76px);
  width:52px; height:52px; border-radius:50%;
  background:#e85d2f; color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; z-index:9998;
  box-shadow:0 4px 20px rgba(232,93,47,.45);
  opacity:0; pointer-events:none;
  transition:opacity .4s ease, transform .52s cubic-bezier(.34,1.56,.64,1), background .18s;
}
@media (max-width:1023px) {
  .bob-wa-float {
    display:flex !important;
    right:16px; bottom:20px; top:auto;
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
}
.bob-wa-float.is-visible { opacity:1; transform:translateY(-50%) translateX(0); pointer-events:auto; }
.bob-wa-float:hover { background:#ff6b3d; transform:translateY(-50%) translateX(0) scale(1.08); }
.bob-wa-float svg { width:26px; height:26px; }

/* ── Bring Bob back ── */
.bob-bring-back {
  position:fixed; right:24px; top:calc(50% + 36px);
  transform:translateX(76px);
  background:none; border:none; padding:0;
  font-family:'JetBrains Mono','Menlo',monospace;
  font-size:.6rem; letter-spacing:.07em; text-transform:lowercase;
  color:#e85d2f; cursor:pointer; opacity:0; pointer-events:none;
  transition:opacity .4s ease, transform .52s cubic-bezier(.34,1.56,.64,1), color .15s;
  white-space:nowrap; z-index:9998;
}
@media (max-width:1023px) { .bob-bring-back { display:none !important; } }
.bob-bring-back.is-visible { opacity:.55; transform:translateX(0); pointer-events:auto; }
.bob-bring-back:hover { opacity:1; color:#ff6b3d; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce) {
  .bob-body-breathe,.bob-head-bob,.bob-cable,.bob-bar,
  .bob-progress,.bob-song,.bob-album,.bob-key { animation:none !important; }
  .bob-progress { transform:scaleX(.4); transform-origin:left center; }
  .bob-bar      { transform:scaleY(.65); transform-origin:bottom center; }
  .bob-widget   { transition:opacity .2s ease !important; }
}