/* Мирослав — flat monochrome companion (see miroslav.js). Uses the redesign tokens in both themes. */
.miro{position:fixed;left:0;top:0;width:84px;height:94px;z-index:58;pointer-events:none;will-change:transform;
  transition:opacity .25s ease,visibility .25s;--miro-shadow:rgba(0,0,0,.24)}
html[data-theme="dark"] .miro{--miro-shadow:rgba(0,0,0,.75)}
.miro.is-hidden,.miro.is-scrolling{opacity:0;visibility:hidden}
.miro.is-hidden *{pointer-events:none!important}
.miro-body{all:unset;position:relative;display:block;width:84px;height:94px;cursor:pointer;pointer-events:auto;border-radius:40px;-webkit-tap-highlight-color:transparent}
.miro-body:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.miro svg{display:block;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.12))}
html[data-theme="dark"] .miro svg{filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}

/* hovering: the sphere floats, its shadow breathes, the hands drift on their own */
.miro-figure{transform-box:view-box;transform-origin:50px 52px;animation:miro-float 3.4s ease-in-out infinite}
.miro-shadow{transform-box:fill-box;transform-origin:center;animation:miro-shadow 3.4s ease-in-out infinite}
.miro-hand{transform-box:fill-box;transform-origin:center}
.miro-hand.l{animation:miro-hand 3.4s ease-in-out infinite .25s}
.miro-hand.r{animation:miro-hand 3.4s ease-in-out infinite .6s}
@keyframes miro-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes miro-shadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.7}}
@keyframes miro-hand{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* face: eyes follow the cursor inside the visor and blink */
.miro-face{transition:transform .12s ease-out}
.miro-eyes-open rect{transform-box:fill-box;transform-origin:center;animation:miro-blink 5s infinite}
.miro-eyes-happy,.miro-eyes-sleepy,.miro-phones{display:none}
@keyframes miro-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}

/* moods */
.miro.is-happy .miro-eyes-open,.miro.is-sleepy .miro-eyes-open{display:none}
.miro.is-happy .miro-eyes-happy,.miro.is-sleepy .miro-eyes-sleepy{display:block}
.miro.is-happy .miro-figure{animation:miro-hop .55s ease 3}
.miro.is-happy .miro-mouth{transform:scale(1.3,1.5);transform-box:fill-box;transform-origin:center}
.miro.is-sleepy .miro-figure{animation-duration:5.5s}
.miro.is-sleepy .miro-mouth{opacity:.4}
.miro.is-focus .miro-phones{display:block}
@keyframes miro-hop{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-12px) rotate(-6deg)}70%{transform:translateY(-4px) rotate(4deg)}}

/* flying: leans into the direction of travel, hands trail behind */
.miro.is-walking .miro-figure{animation:none;transform:rotate(-8deg) translateY(-6px);transition:transform .3s ease}
.miro.is-walking.face-right .miro-figure{transform:rotate(8deg) translateY(-6px)}
.miro.is-walking .miro-hand.l{animation:none;transform:translate(4px,-5px)}
.miro.is-walking .miro-hand.r{animation:none;transform:translate(4px,-5px)}
.miro.is-walking.face-right .miro-hand.l,.miro.is-walking.face-right .miro-hand.r{transform:translate(-4px,-5px)}
.miro.is-walking .miro-shadow{animation:none;transform:scale(.75);opacity:.6}

/* arrival: pops in and waves */
.miro.is-arriving .miro-body{animation:miro-pop .55s cubic-bezier(.3,1.6,.6,1)}
.miro.is-arriving .miro-hand.r{animation:miro-wave .32s ease-in-out 4 alternate .45s}
@keyframes miro-pop{from{transform:scale(.2) translateY(30px);opacity:0}}
@keyframes miro-wave{from{transform:translate(0,0)}to{transform:translate(2px,-12px)}}

/* something important today */
.miro-dot{position:absolute;right:13px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--text);box-shadow:0 0 0 3px var(--bg);transform:scale(0);transition:transform .2s}
.miro.has-news .miro-dot{transform:scale(1)}

/* speech bubble: left-above by default, flips when near the left or top edge */
.miro-speech{position:absolute;bottom:80px;right:58px;width:max-content;max-width:min(260px,70vw);padding:9px 13px;border-radius:16px 16px 4px 16px;
  background:var(--ov-inv,#0b0b0b);color:var(--ov-inv-ink,#f5f5f5);font-size:13px;line-height:1.35;box-shadow:var(--shadow);
  opacity:0;transform:translateY(6px) scale(.96);transform-origin:100% 100%;transition:opacity .2s,transform .2s;pointer-events:none}
.miro-speech.show{opacity:1;transform:none}
.miro.speech-right .miro-speech{right:auto;left:58px;border-radius:16px 16px 16px 4px;transform-origin:0 100%}
.miro.speech-below .miro-speech{bottom:auto;top:88px}
.miro.menu-open .miro-speech{opacity:0}

/* quick menu */
.miro-menu{position:absolute;bottom:98px;right:0;width:250px;padding:12px;border-radius:20px;pointer-events:auto;
  background:var(--surface-strong);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  display:flex;flex-direction:column;gap:6px;color:var(--text)}
.miro-menu[hidden]{display:none}
.miro.menu-right .miro-menu{right:auto;left:0}
.miro.menu-below .miro-menu{bottom:auto;top:98px}
.miro-menu-title{margin:0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.miro-menu-summary{margin:0 0 4px;font-size:13px;line-height:1.4}
.miro-menu button{all:unset;box-sizing:border-box;width:100%;padding:9px 11px;border-radius:12px;font-size:13.5px;font-weight:600;cursor:pointer;background:var(--ov-card-2,transparent)}
.miro-menu button:hover,.miro-menu button:focus-visible{background:var(--ov-inv,#0b0b0b);color:var(--ov-inv-ink,#f5f5f5)}
.miro-menu-row{display:flex;gap:6px;margin-top:2px}
.miro-menu-row button{flex:1;text-align:center;font-weight:500;font-size:12.5px;background:transparent;border:1px solid var(--line)}

/* collapsed: only the eyes peek in from the right edge */
.miro.is-collapsed{transform:translate3d(calc(100vw - 38px),calc(100vh - 170px),0)!important;transition:transform .35s ease}
.miro.is-collapsed .miro-figure{transform:rotate(-14deg)}
.miro.is-collapsed .miro-speech,.miro.is-collapsed .miro-menu{display:none}

@media (prefers-reduced-motion:reduce){.miro *{animation:none!important}}

/* The old hero mascot is replaced by the companion */
html body .miroslav-stage{display:none!important}

/* Splash replies get a tiny copy of the sphere as the avatar (same colours in both themes) */
html body #page-ai .ai-avatar{font-size:0!important;color:transparent!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='b' cx='38%25' cy='30%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.55' stop-color='%23e2e2e2'/%3E%3Cstop offset='1' stop-color='%239a9a9a'/%3E%3C/radialGradient%3E%3ClinearGradient id='v' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232d2d2d'/%3E%3Cstop offset='1' stop-color='%23050505'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='46' fill='url%28%23b%29'/%3E%3Crect x='17' y='33' width='66' height='38' rx='19' fill='url%28%23v%29'/%3E%3Crect x='32' y='42' width='10' height='18' rx='5' fill='%23fff'/%3E%3Crect x='58' y='42' width='10' height='18' rx='5' fill='%23fff'/%3E%3Cpath d='M44 64q6 4 12 0' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3Cellipse cx='34' cy='18' rx='11' ry='6' fill='%23fff' opacity='.85' transform='rotate%28-28 34 18%29'/%3E%3C/svg%3E") center/100% no-repeat!important;border:0!important;box-shadow:0 4px 10px rgba(0,0,0,.18)!important;border-radius:50%!important}

/* ---------- Pet: wardrobe and skins ---------- */
.miro .acc{display:none}
.miro.wear-cap .acc-cap,.miro.wear-ushanka .acc-ushanka,.miro.wear-antenna .acc-antenna,.miro.wear-crown .acc-crown,
.miro.wear-glasses .acc-glasses,.miro.wear-shades .acc-shades,.miro.wear-bowtie .acc-bowtie,.miro.wear-scarf .acc-scarf{display:block}
.miro.skin-graphite .miro-sphere,.miro.skin-graphite .miro-hand-ball{fill:url(#miro-g-body-graphite)}
.miro.skin-chrome .miro-sphere,.miro.skin-chrome .miro-hand-ball{fill:url(#miro-g-body-chrome)}
.miro.is-levelup .miro-figure{animation:miro-levelup 1.1s ease 2}
@keyframes miro-levelup{0%,100%{transform:none}30%{transform:translateY(-14px) rotate(-8deg) scale(1.08)}60%{transform:translateY(-4px) rotate(6deg)}}

/* ---------- Voice: listening, thinking, talking ---------- */
.miro-eq,.miro-think{display:none}
.miro-eq rect{transform-box:fill-box;transform-origin:center;transform:scaleY(.3);transition:transform .08s linear}
.miro.is-listening .miro-eq,.miro.is-thinking .miro-think{display:block}
.miro.is-listening .miro-eyes-open,.miro.is-listening .miro-eyes-happy,.miro.is-listening .miro-eyes-sleepy,.miro.is-listening .miro-mouth,
.miro.is-thinking .miro-eyes-open,.miro.is-thinking .miro-eyes-happy,.miro.is-thinking .miro-eyes-sleepy,.miro.is-thinking .miro-mouth{display:none}
.miro-think circle{animation:miro-dot 1s ease-in-out infinite}
.miro-think circle:nth-child(2){animation-delay:.15s}.miro-think circle:nth-child(3){animation-delay:.3s}
@keyframes miro-dot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.miro.is-talking .miro-mouth{transform-box:fill-box;transform-origin:center;animation:miro-talk .22s ease-in-out infinite alternate}
@keyframes miro-talk{from{transform:scale(1,.6)}to{transform:scale(1.15,1.9)}}
.miro.is-listening .miro-sphere{filter:drop-shadow(0 0 6px rgba(255,255,255,.65))}
.miro.is-listening .miro-shadow{animation:miro-pulse 1.2s ease-in-out infinite}
@keyframes miro-pulse{50%{opacity:.35;transform:scaleX(1.15)}}
@media (prefers-reduced-motion:reduce){.miro-eq rect{transition:none}}

/* ---------- Menu: level, XP bar, wardrobe, achievements ---------- */
.miro-menu{width:272px;max-height:min(70vh,520px);overflow:auto;background:linear-gradient(var(--surface-strong),var(--surface-strong)),var(--bg);z-index:3}
.miro-pet-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.miro-streak{font-size:12.5px;font-weight:700;white-space:nowrap}
.miro-xp{height:7px;border-radius:999px;background:var(--line);overflow:hidden}
.miro-xp i{display:block;height:100%;border-radius:inherit;background:var(--text);transition:width .4s ease}
.miro-xp-label{margin:-2px 0 2px;font-size:11.5px;color:var(--muted)}
.miro-menu button.miro-talk{text-align:center;background:var(--ov-inv,#0b0b0b);color:var(--ov-inv-ink,#f5f5f5)}
.miro-menu button.miro-back{width:auto;padding:4px 10px;font-size:15px;background:transparent;border:1px solid var(--line)}
.miro-pet-head .miro-back+.miro-menu-title{flex:1}
.miro-wardrobe{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.miro-menu button.miro-item{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border:1px solid var(--line);background:transparent;font-size:12.5px}
.miro-menu button.miro-item small{font-weight:500;color:var(--muted);font-size:11px}
.miro-menu button.miro-item.is-on{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.miro-menu button.miro-item.is-locked{opacity:.5;cursor:default}
.miro-menu button.miro-item.is-locked:hover{background:transparent;color:inherit}
.miro-menu button.miro-item:hover small,.miro-menu button.miro-item:focus-visible small{color:inherit}
.miro-awards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}
.miro-awards li{padding:6px 8px;border-radius:10px;color:var(--muted)}
.miro-awards li.is-done{color:var(--text);background:var(--ov-card-2,transparent);font-weight:600}
.miro-menu button.miro-voice{font-weight:500;font-size:13px}
.miro-menu button.miro-voice.is-on{font-weight:700;box-shadow:inset 0 0 0 1.5px var(--text)}
.miro-menu-row button{min-width:0;padding-left:6px;padding-right:6px}

/* conversation: a stop chip under (or above) Miroslav */
.miro-stop{all:unset;box-sizing:border-box;position:absolute;left:50%;top:100px;transform:translateX(-50%);white-space:nowrap;cursor:pointer;pointer-events:auto;
  padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--ov-inv,#0b0b0b);color:var(--ov-inv-ink,#f5f5f5);box-shadow:var(--shadow)}
.miro-stop[hidden]{display:none}
.miro-stop:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.miro.stop-above .miro-stop{top:auto;bottom:100px}
.miro.is-collapsed .miro-stop{display:none}
/* the bubble moves one row further so it never covers the chip */
.miro.in-convo:not(.stop-above).speech-below .miro-speech{top:138px}
.miro.in-convo.stop-above:not(.speech-below) .miro-speech{bottom:132px}