.character-reaction{position:fixed;z-index:48;top:calc(env(safe-area-inset-top,0px) + 64px);left:50%;transform:translateX(-50%);width:min(380px,calc(100vw - 24px));box-sizing:border-box;display:flex;align-items:flex-start;gap:10px;padding:12px 36px 12px 12px;color:#f4f4f6;background:#222329;border:1px solid #57503a;border-radius:16px;box-shadow:0 8px 28px #0007;animation:character-in .22s ease-out;pointer-events:none}
.character-reaction[hidden]{display:none!important}
.character-reaction>img{flex:0 0 48px;width:48px;height:48px;object-fit:contain}
.character-copy{min-width:0;flex:1}.character-copy>b{font-size:13px;color:#f5cd62}.character-copy>p{font-size:13px;line-height:1.4;margin:4px 0 0;overflow-wrap:anywhere}
.character-close{position:absolute;right:2px;top:2px;width:34px;height:36px;border:0;background:transparent;color:#bbb;font-size:24px;cursor:pointer;pointer-events:auto}
.character-listen{margin-top:6px;background:transparent;border:1px solid #72643b;border-radius:8px;padding:5px 9px;color:#f5cd62;font:inherit;cursor:pointer;pointer-events:auto}
@keyframes character-in{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.character-reaction{animation:none}}