/* ↩ 답장 (features/reply.js) — 입력창 위 「○○님에게 답장」 줄 · 말풍선 안 원글 상자 */
.rp-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 8px 8px 8px 12px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; }
.rp-ic { flex: none; font-size: 20px; color: var(--accent-text); }
.rp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rp-t b { font-size: 13px; }
.rp-t small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-q { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin: 0 0 8px; padding: 7px 10px; border: 0; border-left: 3px solid currentColor; border-radius: 8px; background: color-mix(in srgb, currentColor 9%, transparent); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rp-q b { font-size: 12.5px; opacity: .85; }
.rp-q span { font-size: 13px; opacity: .8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* 📱 왼쪽으로 밀어 답장: 미는 동안 오른쪽에 ↩ (60px 넘으면 진하게) */
#msgs .msg { touch-action: pan-y pinch-zoom; transition: transform .18s ease; }
#msgs .msg.rp-swiping { transition: none; position: relative; }
#msgs .msg.rp-swiping::after { content: '↩'; position: absolute; right: -40px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: var(--line); color: var(--muted); }
#msgs .msg.rp-ready::after { background: var(--accent); color: #fff; }