/* Reactions: compact badges below the post, full catalog in a searchable popover. */
.fb-reactions{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:16px 0 5px;padding:12px 0 0;border-top:1px solid #e4eae1}
.fb-reaction-form{display:inline-flex;margin:0;padding:0}
.fb-reaction{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:6px 10px;border:1px solid #d8e5d9;border-radius:999px;background:#f8fbf4;color:#315845;font:600 12px/1.25 system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.fb-reaction:is(:hover,:focus-visible){background:#e9f3e7;border-color:#9ec4ab;outline:2px solid transparent;outline-offset:2px}
.fb-reaction:focus-visible{outline-color:#327a5c}
.fb-reaction.is-active{background:#dcefe0;border-color:#83b697;color:#174d35}
.fb-reaction:disabled{cursor:wait;opacity:.55}
.fb-reaction-count{font-weight:800;min-width:1ch}
.fb-reaction-count:empty{display:none}
.fb-reaction-emoji{font-size:18px;line-height:1.15}
.fb-reaction-readonly{cursor:default}

/* Picker */
.fb-reaction-picker{position:relative;display:inline-flex;align-items:center}
.fb-reaction-picker-toggle{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:7px 13px;border:1px dashed #a6c6ad;border-radius:99px;background:#f7faf3;color:#2a694c;font:700 12px/1.2 system-ui,sans-serif;cursor:pointer;list-style:none}
.fb-reaction-picker-toggle::-webkit-details-marker{display:none}
.fb-reaction-picker-toggle:is(:hover,:focus-visible){background:#e7f3e8;outline:2px solid transparent;outline-offset:2px}
.fb-reaction-picker-toggle:focus-visible{outline-color:#327a5c}
.fb-reaction-picker[open] .fb-reaction-picker-toggle{background:#e2efe3}

.fb-reaction-picker-options{
    position:absolute;bottom:calc(100% + 9px);left:0;z-index:80;
    display:flex;flex-direction:column;width:min(470px,calc(100vw - 32px));
    max-height:min(72vh,610px);max-height:min(72dvh,610px);
    overflow:hidden;box-sizing:border-box;padding:14px;
    border:1px solid #cadfd0;border-radius:12px;background:#fffefa;
    box-shadow:0 18px 42px rgba(23,63,42,.18);color:#214936;
}
.fb-picker-align-right .fb-reaction-picker-options{left:auto;right:0}
.fb-reaction-picker-heading{display:flex;flex:0 0 auto;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 10px}
.fb-reaction-picker-heading strong{font:700 15px/1.3 system-ui,sans-serif}
.fb-reaction-search{flex:1 1 180px;min-width:0;min-height:37px;box-sizing:border-box;margin:0;padding:8px 11px;border:1px solid #cbdccd;border-radius:7px;background:#fafdf8;color:#173f32;font:400 13px/1.3 system-ui,sans-serif}
.fb-reaction-search:focus{outline:2px solid #327a5c;outline-offset:1px}
.fb-reaction-picker-form{display:block;flex:1 1 auto;min-height:0;margin:0;padding:0 4px 2px 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.fb-reaction-group{margin:0;padding:0 0 12px}
.fb-reaction-group + .fb-reaction-group{padding-top:12px;border-top:1px solid #e6eee5}
.fb-reaction-group-title{margin:2px 0 10px;color:#4d6e5e;font:700 12px/1.35 system-ui,sans-serif;letter-spacing:.025em}
.fb-reaction-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.fb-reaction-option{box-sizing:border-box;min-width:0;min-height:40px;justify-content:flex-start;width:100%;padding:7px 9px;border-radius:7px;text-align:left}
.fb-reaction-option .fb-reaction-label{min-width:0;flex:1 1 auto;font:600 12px/1.3 system-ui,sans-serif;overflow-wrap:anywhere}
.fb-reaction-option .fb-reaction-emoji{flex:0 0 22px;text-align:center}
.fb-reaction-option .fb-reaction-count{flex:0 0 auto}
.fb-reaction-option[hidden],.fb-reaction-group[hidden],.fb-reaction-empty[hidden]{display:none!important}
.fb-reaction-empty{margin:12px 0;color:#667c6f;font:400 13px/1.4 system-ui,sans-serif}
@media(max-width:700px){
    .fb-reaction-picker-options{
        position:fixed;left:50%!important;right:auto!important;top:50%;bottom:auto;
        transform:translate(-50%,-50%);width:calc(100vw - 24px);max-width:470px;
        max-height:min(80vh,680px);max-height:min(80dvh,680px);z-index:1000;padding:12px;
    }
}
@media(max-width:380px){
    .fb-reaction-grid{grid-template-columns:minmax(0,1fr)}
    .fb-reaction-option{min-height:38px}
}
@media(prefers-reduced-motion:reduce){.fb-reaction{transition:none}}

/* The picker is attached to the post toolbar, not to the reply form.
   Its counted chips remain in the post-content footer. */
.fb-reactions[hidden]{display:none!important}
#wrap .post-buttons > li.fb-reaction-toolbar-item{position:relative;z-index:auto}
#wrap .post-buttons > li.fb-reaction-toolbar-item:has(details[open]){z-index:110}
#wrap .post-buttons .fb-reaction-toolbar-button{
    display:inline-flex;align-items:center;justify-content:center;
    box-sizing:border-box;width:38px;min-width:38px;height:38px;min-height:38px;
    padding:0;margin:0;border:1px solid var(--fb-control-line,#c7d6c9);
    border-radius:var(--fb-control-radius,5px);
    background:#f4f7f1;color:var(--fb-control-ink,#234d40);
    box-shadow:none;list-style:none;cursor:pointer;
}
#wrap .post-buttons .fb-reaction-toolbar-button::-webkit-details-marker{display:none}
#wrap .post-buttons .fb-reaction-toolbar-button:is(:hover,:focus-visible),
#wrap .post-buttons .fb-reaction-picker[open] .fb-reaction-toolbar-button{
    border-color:#9dbba6;background:#e3eee3;color:#164834;
}
#wrap .post-buttons .fb-reaction-toolbar-button:focus-visible{outline:2px solid #267456;outline-offset:2px}
#wrap .post-buttons .fb-reaction-toolbar-button .icon{font-size:16px;color:inherit}
.fb-reaction-toolbar-item .fb-reaction-picker-options{
    top:calc(100% + 9px);bottom:auto;left:auto;right:0;
}
@media(max-width:700px){
    .fb-reaction-toolbar-item .fb-reaction-picker-options{
        position:fixed;top:50%;bottom:auto;left:50%!important;right:auto!important;
        transform:translate(-50%,-50%);
    }
}

/* "Who reacted" is read-only and shows profile names next to emojis. */
.fb-reaction-people{flex-basis:100%;font:500 12px/1.4 system-ui,sans-serif}
.fb-reaction-people[hidden]{display:none}
.fb-reaction-people-trigger{width:max-content;color:#2c6d52;cursor:pointer;padding:5px 0;text-decoration:underline;text-underline-offset:3px}
.fb-reaction-people-list{margin-top:7px;width:min(430px,100%);box-sizing:border-box;padding:9px 12px;border:1px solid #d5e5d5;border-radius:8px;background:#fbfcf7;max-height:300px;overflow:auto}
.fb-reaction-person{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:5px 16px;padding:8px 0;border-bottom:1px solid #e6eee5}
.fb-reaction-person:last-child{border-bottom:0}
.fb-reaction-person a{color:#216348;font-weight:700;text-decoration:none}
.fb-reaction-person a:hover{text-decoration:underline}
.fb-reaction-person span{color:#52665a}
