/* R01, the studio robot (js/r01.js). The host's data-mood picks which eye and mouth variants show. */
.r01-wrap { position: relative; }
.r01 { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
div.r01 { cursor: default; }
.r01:focus-visible { outline: 3px solid var(--red2); outline-offset: 6px; border-radius: 40px; }
.r-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)) drop-shadow(0 0 40px rgba(215, 38, 61, .18)); animation: r-bob 3.6s ease-in-out infinite; }
@keyframes r-bob { 50% { transform: translateY(-5px); } }
.r-v { display: none; }
.r01[data-mood="idle"] .m-idle, .r01[data-mood="happy"] .m-happy, .r01[data-mood="wink"] .m-wink, .r01[data-mood="sleepy"] .m-sleepy,
.r01[data-mood="sad"] .m-sad, .r01[data-mood="surprised"] .m-surprised, .r01[data-mood="excited"] .m-excited,
.r01[data-mood="think"] .m-think, .r01[data-mood="ko"] .m-ko { display: inline; }
.r-eyes { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .08s; }
.r01.r-blink .r-eyes { transform: scaleY(.08); }
.r01[data-mood="sad"] .r-eyes { transform: translateY(6px) scaleY(.75); }
.r01[data-mood="think"] .r-eyes { transform: translate(6px, -6px); }
.r01[data-mood="happy"] .r-svg, .r01[data-mood="excited"] .r-svg { animation: r-hop .5s ease; }
@keyframes r-hop { 40% { transform: translateY(-14px) rotate(-2deg); } }
.r01[data-mood="ko"] .r-svg { animation: r-shake .4s ease; }
@keyframes r-shake { 25% { transform: translateX(-6px) rotate(-3deg); } 60% { transform: translateX(5px) rotate(2deg); } }
.r01[data-mood="sleepy"] .r-svg { animation: r-bob 6s ease-in-out infinite; }

.r-bubble {
  position: absolute; z-index: 3; width: max-content; max-width: 260px; margin: 0; padding: 12px 15px;
  font: 500 .86rem/1.4 var(--mono); color: var(--ink); background: #1a1112; border: 1px solid rgba(244, 237, 228, .18);
  border-radius: 16px; box-shadow: 0 0 0 1px rgba(215, 38, 61, .35), 0 16px 40px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .2s, transform .2s; pointer-events: none;
}
.r-bubble.show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .r-svg, .r01[data-mood] .r-svg { animation: none; }
  .r-bubble { transition: none; }
}