/* Facebook-style reaction bar. Bordered pills with a visible emoji + label
   (boomer audience: no hover-only popups). The member's own reaction is filled
   in brand blue. Fixed colors so member skins do not wash it out. */

.mbp-react {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 6px 0 2px;
    border-top: 1px solid #e4ebf3;
    font-size: 8pt;
    line-height: 1.4;
}

.mbp-react-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 2px 9px;
    border: 1px solid #cfd8e3;
    border-radius: 14px;
    background: #fff;
    color: #33475b;
    font-size: 8pt;
    font-family: inherit;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.mbp-react-btn:hover {
    background: #eef5fb;
    border-color: #5b8fb9;
    color: #1f5c9e;
}

.mbp-react-btn.is-mine {
    background: #1f5c9e;
    border-color: #1f5c9e;
    color: #fff;
    font-weight: bold;
}

.mbp-react-btn.is-readonly {
    cursor: default;
    background: #f5f8fb;
}

.mbp-react-btn[disabled] {
    opacity: .6;
    cursor: default;
}

.mbp-react-emoji {
    font-size: 11pt;
    line-height: 1;
}

.mbp-react-name {
    font-size: 8pt;
}

.mbp-react-n {
    font-size: 8pt;
    font-weight: bold;
}

.mbp-react-n:empty {
    display: none;
}

.mbp-react-total {
    margin-left: 4px;
    color: #6b7c8f;
    font-size: 8pt;
}

.mbp-react-total[hidden] {
    display: none;
}