/* HarborBeat — reactions, hashtags, autocomplete, infinite scroll */

/* ---- Reaction bar ---- */
.hb-reactbar{position:relative;display:inline-flex;align-items:center;gap:.45rem}
.hb-react-btn{display:inline-flex;align-items:center;gap:.35rem;background:var(--bg-2);border:none;border-radius:var(--r-pill);padding:.4rem .9rem;font-size:.85rem;font-weight:600;color:var(--ink)}
.hb-react-btn:hover{background:var(--line-2)}
.hb-react-btn.reacted{background:#eaf2fe;color:var(--blue)}
.hb-react-emoji{font-size:1.05rem;line-height:1}
.hb-react-count{font-size:.82rem;color:var(--muted);font-weight:600;min-width:1ch}
.hb-react-picker{position:absolute;bottom:calc(100% + 8px);left:0;display:none;gap:.1rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:.35rem .5rem;box-shadow:var(--shadow-lg);z-index:60}
.hb-reactbar.open .hb-react-picker{display:flex}
.hb-react-opt{background:none;border:none;font-size:1.65rem;line-height:1;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;transition:transform .12s}
.hb-react-opt:hover,.hb-react-opt:active{transform:scale(1.3) translateY(-2px);background:var(--bg-2)}

/* ---- Hashtags ---- */
.hb-hashtag{color:var(--blue);font-weight:500}
.hb-hashtag:hover{text-decoration:underline}

/* ---- Search autocomplete ---- */
.hb-ac-wrap{position:relative;flex:1 1 auto}
.hb-ac{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;z-index:1200;display:none}
.hb-ac.show{display:block}
.hb-ac-item{display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;color:var(--ink);font-size:.92rem;border-bottom:1px solid var(--line-2)}
.hb-ac-item:last-child{border-bottom:none}
.hb-ac-item:hover,.hb-ac-item.active{background:var(--bg-2);color:var(--ink)}
.hb-ac-type{font-size:.68rem;font-weight:700;color:var(--muted);background:var(--bg-2);padding:.1rem .45rem;border-radius:var(--r-pill);margin-left:auto;flex:0 0 auto}
.hb-ac-item .bi{color:var(--muted)}

/* ---- Infinite scroll loader ---- */
.hb-infinite-loader{text-align:center;padding:1.4rem 0;color:var(--muted)}
.hb-infinite-loader .spinner-border{width:1.4rem;height:1.4rem;color:var(--blue)}
.hb-infinite-end{text-align:center;padding:1rem 0;color:var(--muted);font-size:.85rem}

/* ---- Business posts (used by business vertical too) ---- */
.hb-bpost{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem 1.1rem;margin-bottom:.8rem}
.hb-bpost-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.hb-bpost-logo{width:42px;height:42px;border-radius:12px;background:var(--bg-2);background-size:cover;background-position:center;flex:0 0 42px}
.hb-bpost-meta{font-size:.78rem;color:var(--muted)}
.hb-bpost-body{color:var(--ink-2);line-height:1.6;white-space:pre-wrap}
.hb-bpost-img{width:100%;border-radius:var(--r);margin-top:.6rem}