/* ═══ Post actions that never jump (feed-actions-v2.js) ═══════════════
   Reacting only fills the heart and shows the number; the "who reacted"
   line is gone from the card and opens as a floating card from the number. */

/* no extra line above the buttons */
.fpost .fpost-react-bar { display: none !important; }

/* numbers keep their space, so 9 to 10 or 0 to 1 never nudges the buttons */
.fpa .fpost-btn-count { display: inline-block; min-width: 2ch; text-align: left; font-variant-numeric: tabular-nums; }
.fpa .fpost-btn-count[style*="display:none"], .fpa .fpost-btn-count[style*="display: none"] { display: inline-block !important; visibility: hidden; }

/* the number next to the heart is its own small button: who reacted */
.fpa .fpost-react-wrap { margin-right: 0; }
.fpa-count-btn { display: inline-flex; align-items: center; gap: 4px; height: 36px; margin: 0 6px 0 -6px; padding: 0 6px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; }
.fpa-count-btn:hover:not([data-empty]) { background: rgba(255,255,255,0.07); }
.fpa-count-btn[data-empty] { cursor: default; pointer-events: none; }
.fpa-count-btn .fpost-btn-count { font-size: 0.84rem; font-weight: 700; }
.fpost-like.liked + .fpost-react-picker ~ .fpa-count-btn, .fpa .fpost-react-wrap:has(.liked) + .fpa-count-btn { color: #ff5c78; }
.fpa-mini { display: inline-flex; }
.fpa-mini:empty { display: none; }
.fpa-mini i { font-style: normal; font-size: 0.82rem; line-height: 1; margin-right: -3px; }

/* the heart: a small pop, no ring after a mouse click or tap */
.fpa .fpost-btn:focus:not(:focus-visible), .fpa-count-btn:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }
.fpa .fpost-btn:focus-visible, .fpa-count-btn:focus-visible { outline: 2px solid rgba(255,92,122,0.8); outline-offset: 2px; }
@keyframes faPop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.fpa .fpost-like.fpa-pop > :first-child { animation: faPop .35s cubic-bezier(.2,1.4,.4,1); }

/* who reacted: a floating card on top of the page */
.fpost-likers-panel.fa-pop { position: fixed; z-index: 9000; max-height: 300px; overflow-y: auto; padding: 8px; border-radius: 16px;
  background: #1e1418; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 20px 50px rgba(0,0,0,0.55); color: #fff; animation: faIn .16s ease-out; }
@keyframes faIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fpost-likers-panel.fa-pop .fliker-header { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 4px; }
.fpost-likers-panel.fa-pop .fliker-hchip { font-size: 0.8rem; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); }
.fpost-likers-panel.fa-pop .fliker-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 10px; cursor: pointer; }
.fpost-likers-panel.fa-pop .fliker-row:hover { background: rgba(255,255,255,0.06); }
.fpost-likers-panel.fa-pop .fliker-name { flex: 1; font-size: 0.88rem; font-weight: 600; color: #fff; }
.fpost-likers-panel.fa-pop .fcomm-inline-empty { color: rgba(255,255,255,0.6); padding: 8px; }
[data-theme="light"] .fpost-likers-panel.fa-pop { background: #fff; border-color: rgba(0,0,0,0.1); color: #18090C; box-shadow: 0 20px 50px rgba(0,0,0,0.18); }
[data-theme="light"] .fpost-likers-panel.fa-pop .fliker-name { color: #18090C; }
[data-theme="light"] .fpost-likers-panel.fa-pop .fliker-hchip { background: rgba(0,0,0,0.05); color: #333; }

/* comments open: the short preview steps aside so the same comment is not shown twice */
.fpost.is-comments-open .fpost-cmt-preview { display: none; }

@media (prefers-reduced-motion: reduce) { .fpa .fpost-like.fpa-pop > :first-child, .fpost-likers-panel.fa-pop { animation: none; } }

/* the comment box looks the same before, during and after writing: one dark field,
   only its edge turns red while you type; long comments grow it smoothly, line by line */
.fpost-comment-input-row { align-items: flex-end; }
.fpost .fpost-comment-input, .fpost .fcomm-reply-input {
  box-sizing: border-box; min-height: 46px; max-height: 140px; padding: 12px 18px; resize: none; overflow-y: hidden;
  border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 23px; background: rgba(255,255,255,0.05) !important; color: #fff !important;
  font: inherit; font-size: 0.92rem; line-height: 1.45; box-shadow: none !important; outline: none;
  transition: border-color .18s ease, height .14s ease; }
.fpost .fpost-comment-input::placeholder, .fpost .fcomm-reply-input::placeholder { color: rgba(255,255,255,0.45); }
.fpost .fpost-comment-input:focus, .fpost .fcomm-reply-input:focus { border-color: rgba(255,92,122,0.75) !important; background: rgba(255,255,255,0.05) !important; box-shadow: none !important; }
.fpost .fpost-comment-input.is-tall { overflow-y: auto; border-radius: 18px; }
.fpost-comment-send { height: 46px; transition: opacity .18s ease, background .15s; }
.fpost-comment-send.is-empty { opacity: 0.4; pointer-events: none; }
.fpost-comments-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); }
[data-theme="light"] .fpost .fpost-comment-input, [data-theme="light"] .fpost .fcomm-reply-input { background: #f6f3f2 !important; color: #18090C !important; border-color: rgba(0,0,0,0.12) !important; }
[data-theme="light"] .fpost .fpost-comment-input:focus { background: #f6f3f2 !important; border-color: rgba(200,16,46,0.6) !important; }
[data-theme="light"] .fpost .fpost-comment-input::placeholder { color: #8a7a7e; }
@media (prefers-reduced-motion: reduce) { .fpost .fpost-comment-input { transition: none; } }