#message-list>.bubble{position:relative;touch-action:pan-y;transition:transform .15s ease}
#message-list>.bubble.reply-dragging{transition:none;user-select:none}
#message-list>.bubble.reply-ready{box-shadow:0 0 0 2px #8caeff}
.message-reply-action{display:none}
@media(hover:hover) and (pointer:fine){
 .message-reply-action{position:absolute;right:-34px;top:8px;display:grid;place-items:center;width:28px;height:28px;border:1px solid #9eaccf33;border-radius:50%;background:#25344a;color:#fff;opacity:0;pointer-events:none;font-size:19px;cursor:pointer;padding:0;transition:opacity .12s}
 .bubble.mine>.message-reply-action{right:auto;left:-34px}
 .bubble:hover>.message-reply-action,.bubble:focus-within>.message-reply-action{opacity:1;pointer-events:auto}
 .message-reply-action:focus-visible{outline:2px solid #8babff;outline-offset:2px;opacity:1;pointer-events:auto}
}
.message-quote{display:flex;flex-direction:column;gap:4px;border-left:3px solid currentColor;background:#7085a61c;border-radius:8px;padding:8px 10px;margin:0 0 9px;white-space:normal;overflow:hidden}
.message-quote strong{font-size:11px}.message-quote span{font-size:12px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bubble.mine .message-quote{background:#00000018}
.message-reply-draft{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:12px 16px;border-top:1px solid var(--line);background:var(--bg);color:var(--ink)}
.message-reply-draft>div{flex:1;min-width:0;display:grid;gap:4px;border-left:3px solid #628bff;padding-left:10px}
.message-reply-draft strong{font-size:12px;color:#557de0}.message-reply-draft span{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.message-reply-draft button{flex-shrink:0;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;color:inherit;background:#8291b21c;cursor:pointer}.message-reply-draft svg{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){#message-list>.bubble{transition:none}}
/* Bridge the 6px gap so hover remains active on the way to Reply. */
@media(hover:hover) and (pointer:fine){
 .message-reply-action::before{content:"";position:absolute;inset:-8px;border-radius:50%}
 .message-reply-action:hover{opacity:1;pointer-events:auto;background:#354968}
}