/* All companion selectors are scoped so the journal and Quill styles stay intact */
.hero{background-image:linear-gradient(90deg,rgba(10,34,60,.45),rgba(20,55,82,.1)),url('pet-sky.webp');background-size:cover;background-position:center}.hero:after{opacity:.15}.paper-art{opacity:.8}
#journal-companion{position:fixed;z-index:40;width:152px;height:196px;font-family:"Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;color:#395f7e;user-select:none}
#journal-companion[hidden],#journal-companion [hidden]{display:none!important}
#journal-companion button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;box-sizing:border-box}
#journal-companion button:focus-visible{outline:2px solid #4a90bc;outline-offset:3px}
#journal-companion .jc-character{position:relative;display:block;width:152px;height:166px;margin:0;padding:0;border:0;border-radius:24px;background:transparent;touch-action:none;cursor:grab}
#journal-companion .jc-character img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 7px 5px #3d668522)}
#journal-companion .jc-character:hover img{filter:drop-shadow(0 9px 8px #3d668530)}
#journal-companion.jc-dragging .jc-character{cursor:grabbing;transform:rotate(-5deg)}
#journal-companion .jc-controls{display:flex;justify-content:center;align-items:center;gap:4px;height:30px}
#journal-companion .jc-switch,#journal-companion .jc-minimize,#journal-companion .jc-restore{border:1px solid #cbdfea;background:#fffffff5;box-shadow:0 3px 12px #284b6510;color:#52738b;border-radius:20px;font-size:11px;height:28px;padding:0 10px;white-space:nowrap}
#journal-companion .jc-minimize{width:26px;padding:0;font-size:17px}
#journal-companion .jc-switch:hover,#journal-companion .jc-minimize:hover{background:#eaf4fb}
#journal-companion .jc-bubble{position:absolute;right:8px;bottom:204px;width:220px;max-width:calc(100vw - 24px);box-sizing:border-box;background:#fff;color:#456b85;border:1px solid #cbdfea;border-radius:16px 16px 4px 16px;box-shadow:0 8px 28px #2d59731c;font-size:13px;line-height:1.85;padding:14px 17px;pointer-events:none}
#journal-companion.jc-near-left .jc-bubble{left:0;right:auto}
#journal-companion.jc-near-top .jc-bubble{top:200px;bottom:auto}
#journal-companion .jc-picker{position:fixed;box-sizing:border-box;padding:18px;background:#fff;border:1px solid #d5e4ef;box-shadow:0 14px 50px #1c47652b;border-radius:20px;max-height:calc(100dvh - 24px);overflow-y:auto;z-index:41}
#journal-companion .jc-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:14px}
#journal-companion .jc-panel-head strong{font-size:15px;font-weight:600;color:#325670}
#journal-companion .jc-panel-head p{font-size:10px;line-height:1.7;color:#8499a8;margin:5px 0 0}
#journal-companion .jc-close{width:26px;height:26px;border:0;border-radius:50%;background:#f0f6fa;color:#6b879c;font-size:19px;padding:0;flex-shrink:0}
#journal-companion .jc-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#journal-companion .jc-options button{border:1px solid #e1eaf1;border-radius:13px;background:#f8fbfd;padding:8px 8px 10px;display:flex;align-items:center;flex-direction:column;color:#476b85;transition:background .15s,border-color .15s}
#journal-companion .jc-options button:hover{background:#eff7fc;border-color:#b0d1e5}
#journal-companion .jc-options button[aria-pressed=true]{background:#eaf5fc;border-color:#83b6d6;box-shadow:inset 0 0 0 1px #b6d7eb}
#journal-companion .jc-options img{width:86px;height:84px;object-fit:contain;pointer-events:none}
#journal-companion .jc-options strong{font-size:12px;margin-top:4px;font-weight:600}
#journal-companion .jc-options span{font-size:10px;color:#89a0af;margin-top:3px}
#journal-companion .jc-panel-foot{font-size:10px;color:#8b9eac;margin-top:14px;text-align:center;line-height:1.7}
#journal-companion .jc-hearts{position:absolute;top:10px;left:18px;color:#8ab7d4;font-size:20px;letter-spacing:9px;opacity:0;pointer-events:none}

#journal-companion .jc-character img{position:absolute;inset:0;transition:opacity .16s ease;transform-origin:50% 85%}
#journal-companion .jc-character .jc-next{opacity:0}
#journal-companion .jc-character{animation:jc-breathe 5s ease-in-out infinite}
#journal-companion .jc-controls{position:absolute;right:0;bottom:8px;gap:5px;height:32px;opacity:.68;transition:opacity .2s}
#journal-companion:hover .jc-controls,#journal-companion:focus-within .jc-controls{opacity:1}
#journal-companion .jc-switch,#journal-companion .jc-minimize{display:grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;background:#ffffffdf}
#journal-companion .jc-switch svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
#journal-companion.jc-dragging .jc-character{transform:none;animation:none}
#journal-companion[data-motion=hop] .jc-character{animation:jc-hop 1s cubic-bezier(.2,.7,.3,1)}
#journal-companion[data-motion=sway] .jc-character{animation:jc-sway 1.4s ease-in-out}
#journal-companion[data-motion=nod] .jc-character{animation:jc-nod 1.5s ease-in-out}
#journal-companion[data-motion=wiggle] .jc-character{animation:jc-wiggle 1.2s ease-in-out}
#journal-companion[data-motion=affection] .jc-character{animation:jc-affection 1.8s ease-in-out}
#journal-companion[data-motion=affection] .jc-hearts{animation:jc-spark 1.7s ease-out}
#journal-companion[data-pose=sleep] .jc-character{animation:jc-breathe 6.5s ease-in-out infinite}
#journal-companion.jc-compact{width:104px;height:42px}#journal-companion .jc-restore{width:38px;height:38px;padding:0;font-size:22px}
@keyframes jc-breathe{50%{transform:translateY(-1.5px) scaleY(1.012)}}
@keyframes jc-hop{20%{transform:scale(1.025,.975)}48%{transform:translateY(-6px) scale(.99,1.01)}75%{transform:translateY(1px) scale(1.01,.99)}}
@keyframes jc-sway{35%{transform:translateX(-2px) rotate(-2deg)}70%{transform:translateX(1px) rotate(1deg)}}
@keyframes jc-nod{40%{transform:translateY(2px) scaleY(.98)}75%{transform:translateY(-1px)}}
@keyframes jc-wiggle{25%{transform:translateY(-3px) rotate(-1.5deg)}55%{transform:translateY(-1px) rotate(1.5deg)}80%{transform:translateY(-2px)}}
@keyframes jc-affection{40%,65%{transform:rotate(-2deg) translateY(-2px)}}
@keyframes jc-spark{30%{opacity:.8}100%{opacity:0;transform:translateY(-18px)}}
@media(pointer:coarse){#journal-companion .jc-controls{opacity:1}}
@media(prefers-reduced-motion:reduce){#journal-companion *,#journal-companion *:before{animation:none!important;transition:none!important}}