/* Decorative actor is physically below the opaque card, not a painted overlay. */
.story-item.companion-anchor { position:relative; isolation:isolate; overflow:visible; }
.story-item.companion-anchor > .story-card { position:relative; z-index:1; }
.companion-host { position:absolute; z-index:0; width:96px; height:120px; pointer-events:none!important; overflow:visible; }
.companion-host * { pointer-events:none!important; }
.companion-host[data-floor="true"] { position:fixed; z-index:16; top:auto; bottom:0; }
.companion-canvas { display:block; width:96px; height:120px; image-rendering:pixelated; pointer-events:none; }
.companion-fallback { position:absolute; left:32px; top:35px; width:32px; height:36px; background:#9575d4; box-shadow:-8px -8px #9575d4,8px -8px #9575d4,-8px 28px #554276,8px 28px #554276; }
.companion-fallback::after { content:''; position:absolute; left:5px; top:9px; width:5px; height:5px; background:#9af5d0; box-shadow:16px 0 #9af5d0; }
#companion-bubble { position:fixed; z-index:32; width:min(220px,calc(100vw - 24px)); box-sizing:border-box; padding:10px; border:1px solid #aa8eda; border-radius:14px; color:#f2eaff; background:#251d34; box-shadow:0 6px 18px #0008; pointer-events:none; font:500 12px/1.5 var(--yoru-font); }
#companion-bubble p { margin:0 0 6px; overflow-wrap:anywhere; }
#companion-bubble button { pointer-events:auto; min-height:44px; padding:7px 9px; border:1px solid #8e75b4; border-radius:8px; background:#49375f; color:#fff; font:inherit; }
#companion-bubble .companion-dismiss { margin-left:5px; background:transparent; }
#companion-bubble button:focus-visible { outline:3px solid #cbb1ff; outline-offset:3px; }
#companion-bubble[hidden],.companion-host[hidden] { display:none!important; }
body:has(#book-dialog[open]) :is(#companion-bubble,.companion-host) { display:none!important; }
@media(prefers-reduced-motion:reduce) { .companion-host { animation:none!important; transition:none!important; } }

/* Promotion escapes the card's isolation stack only after emergence. */
.companion-host[data-layer="foreground"] { position:fixed; z-index:16; }
.companion-host[data-layer="behind"] { position:absolute; z-index:0; }

#companion-bubble { transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease; }
#companion-bubble[data-hover="true"],#companion-bubble:focus-within { transform:translateY(-3px); border-color:#d0b3ff; box-shadow:0 8px 26px #9f70d44d,0 3px 12px #0009; }
#companion-bubble button:hover,#companion-bubble button:focus-visible { background:#654982; box-shadow:0 0 12px #b990ea55; }
@media(prefers-reduced-motion:reduce) { #companion-bubble { transition:none!important; transform:none!important; } }
/* Only the actual ~60×100px sprite bounds accept grab input. */
.companion-host .companion-grip { position:absolute; z-index:3; left:18px; top:10px; width:60px; height:100px; margin:0; padding:0; border:0; border-radius:8px; background:transparent; color:transparent; pointer-events:auto!important; touch-action:none; cursor:grab; }
.companion-host .companion-grip[aria-pressed="true"] { cursor:grabbing; }
.companion-host .companion-grip:disabled { pointer-events:none!important; }
.companion-host .companion-grip:focus-visible { outline:2px dashed #cfb8ff; outline-offset:3px; }
.companion-instructions { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* Comic paper/ink balloon: the tail points to the measured sprite head. */
#companion-bubble { width:min(260px,calc(100vw - 24px)); padding:13px 16px; border:2px solid #271b2b; border-radius:26px 29px 24px 27px; background:#fff9e9; color:#281f2c; box-shadow:3px 4px 0 #17121c; }
#companion-bubble::after { content:''; position:absolute; left:var(--companion-tail-x,50%); bottom:-9px; width:16px; height:16px; background:#fff9e9; border-right:2px solid #271b2b; border-bottom:2px solid #271b2b; transform:translateX(-50%) rotate(45deg); pointer-events:none; }
#companion-bubble[data-tail="up"]::after { top:-9px; bottom:auto; transform:translateX(-50%) rotate(225deg); }
#companion-bubble p { font-weight:700; }
#companion-bubble button { border:1.5px solid #49364d; background:#f0e2c9; color:#281f2c; border-radius:10px; }
#companion-bubble .companion-dismiss { background:#fff9e9; }
#companion-bubble[data-hover="true"],#companion-bubble:focus-within { border-color:#6b4979; box-shadow:3px 5px 0 #271b2b,0 0 15px #b990ea44; }
#companion-bubble button:hover,#companion-bubble button:focus-visible { background:#ead6f0; color:#281f2c; box-shadow:1px 2px 0 #49364d; }
/* Programmatic focus after mouse/touch drag must not look like keyboard focus. */
.companion-host .companion-grip[data-input="pointer"]:focus,.companion-host .companion-grip[data-input="pointer"]:focus-visible { outline:none; }
.companion-host .companion-grip[data-input="keyboard"]:focus-visible { outline:2px dashed #cfb8ff; outline-offset:3px; }
/* Actor-local close affordance. Only44px native hitbox is interactive, no
   persistent viewport control and no overlap with60×100px grab bounds. */
.companion-host .companion-close { position:absolute; z-index:4; display:grid; place-items:center; width:44px; height:44px; padding:0; margin:0; border:0; border-radius:50%; background:transparent; color:#302136; pointer-events:auto!important; cursor:pointer; }
.companion-host .companion-close span { display:grid; place-items:center; box-sizing:border-box; width:22px; height:22px; border:1.5px solid #50365c; border-radius:50%; background:#fff9e9; font:700 18px/1 sans-serif; box-shadow:1px 2px 0 #17121c88; }
.companion-host .companion-close:hover span { background:#ead6f0; }
.companion-host .companion-close:focus-visible { outline:2px solid #cbb1ff; outline-offset:1px; }
.companion-host .companion-close[hidden] { display:none!important; }
/* Long/zoomed recommendation copy scrolls inside, leaving ink tail unclipped.
   Only genuinely overflowing text becomes a keyboard/pointer reading surface. */
#companion-bubble .companion-bubble-content { overflow-y:auto; overscroll-behavior:contain; max-width:100%; }
#companion-bubble .companion-bubble-content[data-overflow="true"] { pointer-events:auto; }
#companion-bubble .companion-bubble-content:focus-visible { outline:2px solid #6b4979; outline-offset:2px; border-radius:8px; }