.spyke-mascot{position:fixed;left:0;top:0;transform:translate(var(--spyke-x,20px),var(--spyke-y,calc(100vh - 90px)));z-index:85;display:flex;align-items:center;gap:7px;max-width:125px;padding:8px 12px 8px 8px;border:1px solid rgba(255,255,255,.65);border-radius:40px;background:rgba(16,43,41,.88);color:#fff8e7;box-shadow:0 7px 24px rgba(16,43,41,.2),inset 0 1px rgba(255,255,255,.16);backdrop-filter:blur(14px);cursor:pointer;transition:transform 2.4s cubic-bezier(.4,0,.2,1),box-shadow .2s;font:600 12px var(--display)}.spyke-mascot:hover{box-shadow:0 10px 28px rgba(16,43,41,.3)}.spyke-mascot:focus-visible{outline:3px solid var(--gold);outline-offset:4px;transition:none}.spyke-avatar{width:39px;height:39px;display:grid;place-items:center;color:var(--gold);flex-shrink:0}.spyke-avatar svg{width:32px;height:32px;overflow:visible}.spyke-avatar img{width:39px;height:39px;object-fit:cover;border-radius:50%}.spyke-mascot.is-walking .spyke-avatar{animation:spyke-step .6s ease-in-out infinite alternate}.spyke-panel{position:fixed;bottom:22px;left:22px;width:min(360px,calc(100vw - 36px));max-height:min(580px,calc(100dvh - 36px));z-index:110;display:flex;flex-direction:column;background:rgba(250,248,236,.96);border:1px solid rgba(255,255,255,.8);border-radius:20px;box-shadow:0 20px 70px rgba(9,30,29,.28);backdrop-filter:blur(22px);overflow:hidden;color:var(--pine)}.spyke-panel[hidden]{display:none}.spyke-head{display:flex;align-items:center;gap:12px;padding:16px;background:var(--pine);color:var(--paper)}.spyke-head>span{flex:1}.spyke-head strong{display:block;font:600 18px var(--display)}.spyke-head small{display:block;color:#ccd9d1;font-size:11px;margin-top:4px}.spyke-head button{width:36px;height:36px;border:1px solid #ffffff35;border-radius:50%;background:transparent;color:var(--paper);font-size:22px;cursor:pointer}.spyke-messages{padding:16px;overflow-y:auto;min-height:100px;flex:1;overscroll-behavior:contain;scroll-behavior:smooth}.spyke-message{font:13px/1.65 var(--body);padding:11px 13px;border-radius:12px;white-space:pre-line;margin:0 0 10px;background:rgba(75,135,133,.09);overflow-wrap:anywhere}.spyke-message--user{margin-left:25px;background:var(--pine);color:var(--paper);border-bottom-right-radius:3px}.spyke-message button,.spyke-message a{display:block;margin-top:9px;border:0;border-bottom:1px solid var(--orange);background:transparent;color:var(--pine);font:600 12px var(--body);padding:5px 0;cursor:pointer;text-align:left;text-decoration:none}.spyke-prompts{display:flex;gap:7px;flex-wrap:wrap;padding:0 16px 12px}.spyke-prompts button{border:1px solid rgba(16,43,41,.15);border-radius:20px;background:transparent;color:var(--pine);padding:7px 10px;font:11px var(--body);cursor:pointer}.spyke-prompts button:hover{background:rgba(75,135,133,.1)}.spyke-form{display:flex;gap:8px;padding:13px 16px;border-top:1px solid rgba(16,43,41,.12)}.spyke-form input{width:100%;min-width:0;border:1px solid rgba(16,43,41,.2);border-radius:8px;background:#fffdf8;padding:11px;font:14px var(--body);color:var(--pine)}.spyke-form button{flex-shrink:0;border:0;border-radius:8px;background:var(--pine);color:var(--paper);width:42px;font-size:20px;cursor:pointer}.spyke-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 16px 13px;font-size:10px;color:var(--muted)}.spyke-foot button{border:0;background:transparent;text-decoration:underline;cursor:pointer;color:var(--pine);font:10px var(--body)}.spyke-form input:focus-visible,.spyke-panel button:focus-visible,.spyke-panel a:focus-visible{outline:2px solid #4b8785;outline-offset:2px}.spyke-visually-hidden{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.spyke-mascot[hidden]{display:none}.visually-hidden{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.spyke-mascot--dog{--spyke-cell-w:96px;--spyke-cell-h:104px;max-width:130px;padding:0;gap:0;flex-direction:column;align-items:center;background:transparent;border:0;box-shadow:none;backdrop-filter:none}.spyke-mascot--dog:hover{box-shadow:none}.spyke-sprite{width:var(--spyke-cell-w);height:var(--spyke-cell-h);background-image:url('assets/spyke/spyke-sprites.webp');background-repeat:no-repeat;background-size:calc(var(--spyke-cell-w)*8) calc(var(--spyke-cell-h)*11);background-position:calc(var(--spyke-cell-w)*var(--spyke-col,0)*-1) calc(var(--spyke-cell-h)*var(--spyke-row,0)*-1);filter:drop-shadow(0 5px 4px rgba(9,30,29,.2))}.spyke-mascot--dog.is-walking .spyke-avatar{animation:none}.spyke-name{background:rgba(16,43,41,.9);color:var(--paper);padding:5px 12px;border:1px solid #ffffff66;border-radius:20px;backdrop-filter:blur(12px);font:600 11px var(--display)}.spyke-head-photo{width:38px;height:45px;object-fit:contain}.spyke-story{padding:13px 16px 0}.spyke-story[hidden]{display:none}.spyke-story img{width:100%;height:150px;object-fit:cover;border-radius:10px;object-position:center 56%}.spyke-story p{font:12px/1.6 var(--body);color:var(--pine);margin:10px 0 0}
@media(max-width:760px){.spyke-mascot--dog{--spyke-cell-w:80px;--spyke-cell-h:86.6667px}.spyke-story img{height:115px}.spyke-panel:has(.spyke-story:not([hidden])) .spyke-messages{min-height:50px}}
@keyframes spyke-step{from{transform:translateY(-2px) rotate(-5deg)}to{transform:translateY(2px) rotate(5deg)}}
@media(max-width:760px){.spyke-panel{left:18px;bottom:18px;max-height:calc(100dvh - 100px)}.spyke-form input{font-size:16px}.spyke-mascot{padding-right:10px}.spyke-messages{scroll-behavior:auto}}
@media(prefers-reduced-motion:reduce){.spyke-mascot{transition:none}.spyke-mascot.is-walking .spyke-avatar{animation:none}.spyke-messages{scroll-behavior:auto}}
@media(prefers-reduced-transparency:reduce){.spyke-panel{background:#faf8ec}.spyke-mascot{background:#102b29}}
/* Fixed helper: its position stays predictable, above the cart and mobile dock. */
.spyke-mascot--dog{left:auto;top:auto;right:max(22px,env(safe-area-inset-right));bottom:max(var(--spyke-bottom,22px),calc(22px + env(safe-area-inset-bottom)));transform:none;transition:none}
.spyke-panel{left:auto;right:max(22px,env(safe-area-inset-right))}
.has-open-dialog .spyke-mascot,.has-open-dialog .spyke-panel{visibility:hidden}
@media(max-width:760px){.spyke-mascot--dog{right:max(14px,env(safe-area-inset-right));padding:0}.spyke-panel{left:auto;right:max(18px,env(safe-area-inset-right));bottom:calc(86px + env(safe-area-inset-bottom));max-height:calc(100dvh - 110px - env(safe-area-inset-bottom))}}