/* The bar under a post in its six looks (reactions/partials/post_bar.php,
 * library/PostBar.php; behaviour: assets/js/post_bar.js).
 *   .pb--a Clean   .pb--b Pill bar   .pb--c Floating reactions
 *   .pb--d Compact .pb--e Social proof .pb--f Creator glow
 * Colours come from the tokens on .pb; body.theme-dark redefines them. */
.pb {
    --pb-fg: var(--sb-text, #1c1e21);
    --pb-muted: #65676b;
    --pb-line: var(--sb-border, #e4e6eb);
    --pb-card: var(--sb-surface, #fff);
    --pb-sunk: var(--sb-surface-2, #f0f2f5);
    --pb-hover: rgba(127, 127, 127, .1);
    --pb-accent: #1877f2;
    --pb-r-like: #1877f2;
    --pb-r-love: #e5345b;
    --pb-r-care: #b97d00;
    --pb-r-laugh: #b97d00;
    --pb-r-wow: #b97d00;
    --pb-r-sad: #b97d00;
    --pb-r-angry: #d9581d;
    --pb-gift: #e5345b;
    --pb-shadow: 0 10px 30px rgba(20, 30, 50, .16), 0 2px 6px rgba(20, 30, 50, .08);
    position: relative;
    padding: 2px 4px 4px;
    font-size: 14px;
    color: var(--pb-fg);
    clear: both;
}
body.theme-dark .pb {
    --pb-muted: #a8adb8;
    --pb-hover: rgba(255, 255, 255, .07);
    --pb-accent: #5a95ff;
    --pb-r-like: #5a95ff;
    --pb-r-love: #ff5a7a;
    --pb-r-care: #f2b53f;
    --pb-r-laugh: #f2b53f;
    --pb-r-wow: #f2b53f;
    --pb-r-sad: #f2b53f;
    --pb-r-angry: #ff8a4c;
    --pb-gift: #ff5a7a;
    --pb-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .4);
}
.pb button { font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; }
.pb [role="button"] { cursor: pointer; }
.pb :focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; border-radius: 8px; }
.pb i[class^="feather-"] { font-size: 18px; line-height: 1; }
.pb-sp { flex: 1; }

/* The summary line: who reacted, counts. */
.pb-sum { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 2px 6px; font-size: 13px; color: var(--pb-muted); flex-wrap: wrap; }
.pb-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pb-who.is-empty { display: none; }
.pb-who:hover .pb-names, .pb-who:hover .pb-n { text-decoration: underline; }
.pb-names { min-width: 0; }
.pb-link { padding: 0; font-size: 13px; color: var(--pb-muted); }
.pb-link:hover { text-decoration: underline; color: var(--pb-fg); }
.pb-dot::before, .pb--a .pb-views::before { content: "·"; margin-right: 6px; }
.pb-views { display: inline-flex; align-items: center; gap: 4px; }
.pb-views i[class^="feather-"] { font-size: 14px; }
.pb--a .pb-views i { display: none; }
.pb-n { font-variant-numeric: tabular-nums; display: inline-block; overflow: hidden; vertical-align: bottom; }
.pb-roll { display: inline-block; animation: pbRollUp .32s cubic-bezier(.2, .8, .3, 1.2); }
.pb-roll.down { animation-name: pbRollDown; }
@keyframes pbRollUp { from { transform: translateY(80%); opacity: 0; } }
@keyframes pbRollDown { from { transform: translateY(-80%); opacity: 0; } }

.pb-emo { display: inline-flex; }
.pb-emo span {
    width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; line-height: 1;
    background: var(--pb-card); box-shadow: 0 0 0 2px var(--pb-card); margin-left: -5px;
}
.pb-emo span:first-child { margin-left: 0; }
.pb-emo-sm span { width: 18px; height: 18px; font-size: 12px; }

.pb-faces { display: inline-flex; }
.pb-face { position: relative; width: 24px; height: 24px; border-radius: 50%; margin-left: -7px; box-shadow: 0 0 0 2px var(--pb-card); background: var(--pb-sunk); flex: none; }
.pb-face:first-child { margin-left: 0; }
.pb-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.pb-face i {
    position: absolute; right: -5px; bottom: -4px; font-style: normal; font-size: 11px; width: 16px; height: 16px; line-height: 1;
    border-radius: 50%; background: var(--pb-card); display: grid; place-items: center;
}
.pb-face.pb-more { display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--pb-muted); }
.pb-face.is-new { animation: pbFaceIn .35s cubic-bezier(.2, .8, .3, 1.4); }
@keyframes pbFaceIn { from { transform: scale(.3); opacity: 0; } }
.pb-faces.has-badges .pb-face { width: 28px; height: 28px; }

/* The action row (A, C, E, F). */
.pb-acts { display: flex; border-top: 1px solid var(--pb-line); padding-top: 3px; }
.pb-acts > * { flex: 1 1 0; min-width: 0; display: flex; }
.pb-act {
    --rc: var(--pb-muted);
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
    border-radius: 8px; padding: 8px 6px; font-weight: 600; color: var(--pb-muted) !important;
    transition: background-color .15s, transform .12s, color .15s;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.pb-act:hover { background: var(--pb-hover); }
.pb-act:active { transform: scale(.95); }
.pb-act.is-on { color: var(--rc) !important; }
.pb-ic { display: inline-grid; place-items: center; min-width: 20px; height: 20px; font-size: 18px; line-height: 1; }
.pb-emoji { font-size: 18px; line-height: 1; }
.pb .is-pop .pb-ic { animation: pbPop .42s cubic-bezier(.2, .8, .3, 1.4); }
@keyframes pbPop { 0% { transform: scale(1); } 35% { transform: scale(1.45) rotate(-8deg); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }
.pb-act.pb-gift { color: var(--pb-gift) !important; position: relative; overflow: hidden; }
.pb-act.pb-gift::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(229, 52, 91, .16) 50%, transparent 65%);
    transform: translateX(-120%); animation: pbSheen 6s ease-in-out infinite 1.5s;
}
@keyframes pbSheen { 0% { transform: translateX(-120%); } 18%, 100% { transform: translateX(120%); } }

/* B: pills. */
.pb-pills { display: flex; gap: 8px; padding: 6px 4px 4px; flex-wrap: wrap; align-items: center; }
.pb-pill {
    --rc: var(--pb-muted);
    display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--pb-line) !important; background: var(--pb-sunk) !important;
    border-radius: 999px; padding: 6px 13px; font-size: 13.5px; font-weight: 600; color: var(--pb-muted) !important;
    transition: background-color .2s, border-color .2s, color .2s, transform .12s;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.pb-pill:hover { border-color: var(--pb-muted) !important; }
.pb-pill:active { transform: scale(.94); }
.pb-pill.is-on { color: var(--rc) !important; border-color: color-mix(in srgb, var(--rc) 45%, transparent) !important; background: color-mix(in srgb, var(--rc) 12%, transparent) !important; }
.pb-pill .pb-ic, .pb-pill i[class^="feather-"] { font-size: 16px; min-width: 16px; height: 16px; }

/* D: one compact row. */
.pb-row { display: flex; align-items: center; gap: 2px; padding: 4px 0; }
.pb-ib {
    --rc: var(--pb-muted);
    display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 7px 9px; font-weight: 600; color: var(--pb-muted) !important;
    transition: background-color .15s, transform .12s; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.pb-ib:hover { background: var(--pb-hover); }
.pb-ib:active { transform: scale(.92); }
.pb-ib.is-on { color: var(--rc) !important; }
.pb-row .pb-views { font-size: 12.5px; color: var(--pb-muted); padding: 0 6px; }
.pb-row .pb-emo { margin-right: 4px; }
.pb-save.is-saved { color: var(--pb-accent) !important; }
.pb-save.is-saved i { font-weight: 900; }
.pb-ctx { display: flex; align-items: center; gap: 8px; padding: 10px 14px 0; font-size: 12.5px; color: var(--pb-muted, #65676b); cursor: pointer; }
.pb-ctx-faces { display: inline-flex; }
.pb-ctx-faces img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; margin-left: -6px; box-shadow: 0 0 0 2px var(--sb-surface, #fff); }
.pb-ctx-faces img:first-child { margin-left: 0; }

/* E: the top comment. */
.pb-top {
    display: flex !important; gap: 8px; align-items: flex-start; text-align: left; width: 100%; background: var(--pb-sunk) !important;
    border-radius: 12px; padding: 8px 10px !important; font-size: 13px; margin-top: 4px !important; line-height: 1.4;
}
.pb-top img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.pb-top b { font-weight: 700; }
.pb-top small { display: block; color: var(--pb-muted); font-size: 11.5px; margin-top: 1px; }

/* F: gifts. */
.pb-giftchip { color: var(--pb-gift) !important; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px !important; background: color-mix(in srgb, var(--pb-gift) 10%, transparent) !important; }

/* The reaction picker (one, moved to whichever Like opened it). */
.pb-likewrap, .pb-sharewrap { position: relative; display: flex; }
.pb-acts .pb-likewrap > button, .pb-acts .pb-sharewrap > button { width: 100%; }
.pb-picker {
    position: absolute; left: -4px; bottom: calc(100% + 6px); z-index: 60;
    display: flex; gap: 2px; padding: 5px 6px; background: var(--pb-card); border: 1px solid var(--pb-line);
    border-radius: 999px; box-shadow: var(--pb-shadow); transform-origin: 30px 100%; animation: pbPickIn .22s cubic-bezier(.2, .8, .3, 1.2);
}
@keyframes pbPickIn { from { transform: scale(.6) translateY(8px); opacity: 0; } }
.pb-picker button {
    position: relative; width: 40px; height: 40px; border-radius: 50%; font-size: 27px; line-height: 1; padding: 0;
    display: grid; place-items: center; transition: transform .16s cubic-bezier(.2, .8, .3, 1.4);
    animation: pbEmoIn .3s cubic-bezier(.2, .8, .3, 1.4) backwards; animation-delay: calc(var(--i) * 28ms);
}
@keyframes pbEmoIn { from { transform: translateY(12px) scale(.4); opacity: 0; } }
.pb-picker button:hover, .pb-picker button:focus-visible { transform: translateY(-7px) scale(1.32); outline: none; }
.pb-picker .pb-tip {
    position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap;
    background: var(--pb-fg); color: var(--pb-card); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    opacity: 0; transition: opacity .12s; pointer-events: none;
}
.pb-picker button:hover .pb-tip, .pb-picker button:focus-visible .pb-tip { opacity: 1; }

/* The Share menu. */
.pb-menu {
    position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 60; min-width: 210px;
    background: var(--pb-card); border: 1px solid var(--pb-line); border-radius: 12px; box-shadow: var(--pb-shadow);
    padding: 6px; display: grid; gap: 2px; animation: pbPickIn .18s ease-out;
}
.pb-menu[hidden] { display: none; }
.pb-menu > a, .pb-menu > button {
    display: flex !important; align-items: center; gap: 10px; padding: 9px 10px !important; border-radius: 8px; text-align: left;
    color: var(--pb-fg) !important; font-size: 14px; font-weight: 500; text-decoration: none !important; width: 100%;
}
.pb-menu > a:hover, .pb-menu > button:hover { background: var(--pb-hover) !important; }
.pb-menu i[class^="feather-"] { font-size: 17px; color: var(--pb-accent); }
.pb--b .pb-menu, .pb--d .pb-menu { left: 0; right: auto; }

/* C: reactions that float up from the button. */
.pb-float {
    position: absolute; pointer-events: none; font-size: 22px; z-index: 55; opacity: 0; line-height: 1;
    animation: pbFloatUp 1.05s cubic-bezier(.2, .7, .3, 1) forwards; animation-delay: var(--d);
}
@keyframes pbFloatUp {
    0% { transform: translate(0, 0) scale(.5); opacity: 0; }
    15% { opacity: 1; transform: translate(calc(var(--dx) * .2), -14px) scale(1.1); }
    100% { transform: translate(var(--dx), -110px) scale(.85) rotate(var(--rot)); opacity: 0; }
}
.pb-ring { position: absolute; pointer-events: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--rc); animation: pbRing .5s ease-out forwards; z-index: 54; }
@keyframes pbRing { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

@media (max-width: 480px) {
    .pb--a .pb-sum .pb-dot { display: none; }
    .pb-act { gap: 5px; padding: 8px 2px; font-size: 13.5px; }
    .pb--f .pb-act .pb-lbl { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .pb *, .pb *::before, .pb *::after { animation: none !important; transition: none !important; }
    .pb-float, .pb-ring { display: none; }
}

/* The list of who reacted (assets/js/reaction.js): the "First" tag and Wave back. */
.sbr-first { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; vertical-align: 2px; color: #b26a00; background: rgba(245, 159, 0, .16); }
body.theme-dark .sbr-first { color: #ffc24d; background: rgba(245, 159, 0, .2); }
.sbr-row { display: flex; align-items: center; }
.sbr-row .sbd-person { flex: 1; min-width: 0; }
.sbr-wave { flex: none; margin-right: 18px; border: 1px solid var(--sb-border, #e4e6eb); background: transparent; color: inherit; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.sbr-wave:hover { background: rgba(127, 127, 127, .1); }
.sbr-wave.is-done { color: #1877f2; border-color: rgba(24, 119, 242, .4); cursor: default; }

/* Your post is moving (library/Engagement.php): a quiet chip on your own recent post. */
.pb-milestone { display: inline-flex; align-items: center; gap: 5px; margin: 2px 6px 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #1d8a5b; background: rgba(29, 138, 91, .12); }
body.theme-dark .pb-milestone { color: #4cc38a; background: rgba(76, 195, 138, .14); }
.pb-milestone i { font-size: 13px !important; }

/* While you were away (library/Engagement.php): one card at the top of the feed. */
.sb-away { position: relative; display: flex; gap: 12px; align-items: center; margin: 0 0 12px; padding: 12px 40px 12px 14px; border-radius: 14px; background: var(--sb-surface, #fff); border: 1px solid var(--sb-border, #e4e6eb); }
.sb-away-faces { display: inline-flex; flex: none; }
.sb-away-faces img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; margin-left: -10px; box-shadow: 0 0 0 2px var(--sb-surface, #fff); }
.sb-away-faces img:first-child { margin-left: 0; }
.sb-away-text { flex: 1; min-width: 0; font-size: 14px; }
.sb-away-text b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #1877f2; margin-bottom: 2px; }
.sb-away-text small { display: block; color: var(--sb-text-muted, #65676b); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-away a.sb-away-open { font-weight: 700; white-space: nowrap; }
.sb-away-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.sb-away-x:hover { background: rgba(127, 127, 127, .12); }