/* Volti — the guide in the corner. Ink body, paper eyes: it inverts with dark mode like everything else. */
.volti { position: relative; --vw: 84px; }
.volti-btn { display: block; width: var(--vw); aspect-ratio: 200 / 220; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); -webkit-tap-highlight-color: transparent; border-radius: 30%; }
.volti-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.volti-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.volti-svg .v-skin { fill: var(--ink); }
.volti-svg .v-eye { fill: var(--ground); }
.volti-svg .v-tattoo { fill: none; stroke: var(--ground); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.volti-svg .v-happy path { fill: none; stroke: var(--ground); stroke-linecap: round; stroke-width: 7; }
.volti-svg .v-shadow { fill: var(--ink); opacity: .1; transform-box: fill-box; transform-origin: center; }
.volti-svg .v-sparks path { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.volti-svg .v-all { transform-box: view-box; transform-origin: 100px 180px; }
.volti-svg .v-bloom { transform-box: view-box; transform-origin: 100px 104px; }
.volti-svg .v-look { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.volti-svg .v-eyes { transform-box: fill-box; transform-origin: center; transition: transform .12s; }
.volti-svg .v-happy { opacity: 0; }

/* idle: floats, the petals breathe */
.volti.awake .v-all { animation: vfloat 3.4s ease-in-out infinite; }
.volti.awake .v-shadow { animation: vshadow 3.4s ease-in-out infinite; }
.volti.awake .v-bloom { animation: vbloom 9s ease-in-out infinite; }
@keyframes vfloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-2deg); } }
@keyframes vshadow { 0%, 100% { transform: scaleX(1); opacity: .1; } 50% { transform: scaleX(.8); opacity: .05; } }
@keyframes vbloom { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(14deg) scale(1.025, .985); } }

/* faces */
.volti.blink .v-eyes { transform: scaleY(.1); }
.volti[data-mood="happy"] .v-look { opacity: 0; } .volti[data-mood="happy"] .v-happy { opacity: 1; }
.volti[data-mood="wow"] .v-look { transform: scale(1.2); transform-box: fill-box; transform-origin: center; }
.volti[data-mood="think"] .v-look { transform: translate(-4px, 6px); }
.volti[data-mood="sleepy"] .v-eyes { transform: scaleY(.28) translateY(8px); transition-duration: .6s; }
.volti.shy:not([data-mood]) .v-eyes, .volti.shy[data-mood=""] .v-eyes { transform: scaleY(.72); }
.volti.shy .v-bloom { animation-duration: 3s; }
/* the eye-roll */
.volti.roll .v-look { animation: vroll .9s ease-in-out; }
@keyframes vroll { 0% { transform: none; } 30% { transform: translate(-5px, -9px); } 55% { transform: translate(5px, -10px); } 80% { transform: translate(6px, -4px); } 100% { transform: none; } }
/* petals whirl when it's happy */
.volti.whirl .v-bloom { animation: vwhirl 1.5s cubic-bezier(.3,.7,.3,1); }
@keyframes vwhirl { to { transform: rotate(360deg); } }
.volti.zap .v-sparks path { animation: vspark .7s ease-out; }
.volti.zap .v-sparks path:nth-child(2) { animation-delay: .07s; } .volti.zap .v-sparks path:nth-child(3) { animation-delay: .14s; }
@keyframes vspark { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }

/* speech bubble */
.volti-say { position: relative; margin: 0; max-width: 17rem; padding: 11px 14px; border-radius: 18px; background: var(--ground); color: var(--ink); font-size: 14px; line-height: 1.42; text-wrap: pretty;
  border: 1px solid var(--hair); box-shadow: 0 14px 34px -18px rgba(0,0,0,.35); }
.volti-say.pop { animation: vpop .42s cubic-bezier(.3,1.5,.5,1); }
.volti-say.out { animation: vout .22s ease-in forwards; }
@keyframes vpop { 0% { transform: scale(.8) translateY(8px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes vout { to { transform: scale(.92) translateY(6px); opacity: 0; } }
.vs-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vs-actions:not(:empty) { margin-top: 10px; }
.vs-btn { font: 500 13px/1 var(--body); padding: 9px 13px; border-radius: 999px; border: 1px solid var(--hair); background: var(--surface); color: var(--ink); cursor: pointer; }
.vs-btn.primary { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.vs-btn:hover { border-color: var(--muted); }

/* Ray's dock: a fixed layer that JS glides around the screen (transform); home is the bottom-right corner */
.ray-dock { position: fixed; z-index: 30; left: 0; top: 0; --vw: 84px; pointer-events: none; opacity: 0; will-change: transform; transition: opacity .3s; }
.ray-dock.shown { opacity: 1; }
.ray-dock .volti-btn, .ray-dock .ray-x { pointer-events: auto; }
.ray-dock .volti-say { position: absolute; right: 0; bottom: calc(100% + 12px); width: max-content; max-width: 17rem; pointer-events: none; transform-origin: 85% 100%; }
.ray-dock .volti-say:has(.vs-btn) { pointer-events: auto; }
.ray-dock .volti-say::after { content: ""; position: absolute; right: 30px; bottom: -7px; width: 12px; height: 12px; transform: rotate(45deg); background: var(--ground); border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.ray-dock.b-left .volti-say { right: auto; left: 0; transform-origin: 15% 100%; }
.ray-dock.b-left .volti-say::after { right: auto; left: 30px; }
.ray-dock.b-below .volti-say { bottom: auto; top: calc(100% + 12px); transform-origin: 85% 0; }
.ray-dock.b-below .volti-say::after { bottom: auto; top: -7px; border: 0; border-left: 1px solid var(--hair); border-top: 1px solid var(--hair); }
.ray-dock[data-state="off"] { --vw: 60px; }
.ray-dock[data-state="off"]:not(.talking) .volti-btn { opacity: .8; }
/* the × to send Ray away: top-right corner of Ray */
.ray-x { position: absolute; top: -4px; right: -8px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  border: 1px solid var(--hair); background: var(--ground); color: var(--muted); font: 400 15px/1 var(--body); cursor: pointer; opacity: .75; transition: opacity .2s, transform .2s; }
.ray-x:hover, .ray-x:focus-visible { opacity: 1; color: var(--ink); transform: scale(1.1); }
.ray-dock.leaving { opacity: 0; transition: opacity .35s ease; }
.ray-dock.leaving .volti-btn { transform: scale(.4) translateY(30px); transition: transform .35s ease-in; }
.ray-dock.away { opacity: 0; pointer-events: none; }
.ray-dock.away * { pointer-events: none !important; }
.mode-slot { position: relative; display: inline-flex; }
.ray-back { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 500 12px/1 var(--body); color: var(--ink);
  background: var(--ground); border: 1px solid var(--hair); border-radius: 999px; padding: 8px 12px; cursor: pointer; box-shadow: 0 8px 20px -12px rgba(0,0,0,.3); animation: vpop .42s cubic-bezier(.3,1.5,.5,1); }
@media (max-width: 640px) { .ray-back { left: auto; right: -52px; transform: none; } }
.ray-back:hover { color: var(--ink); border-color: var(--muted); }
@media (max-width: 640px) { .ray-dock { --vw: 64px; } .ray-dock .volti-say { max-width: min(17rem, calc(100vw - 40px)); } .ray-dock[data-state="off"] { --vw: 50px; } }
@media (prefers-reduced-motion: reduce) { .volti *, .volti-say { animation: none !important; transition: none !important; } }