/* The painted face occupies 224 of each original 256px asset. */
.reaction-face{display:inline-flex;position:relative;width:var(--reaction-size,17px);height:var(--reaction-size,17px);flex:none;overflow:hidden;border-radius:50%;vertical-align:middle;box-sizing:content-box}
.reaction-face img{position:absolute!important;max-width:none!important;width:114.285714%!important;height:114.285714%!important;left:50%;top:50%;transform:translate(-50%,-50%);object-fit:contain}
.reaction-stack{display:inline-flex;align-items:center;isolation:isolate;vertical-align:middle}
.reaction-stack-item{display:inline-flex;position:relative;box-shadow:0 0 0 1.5px var(--bg-card,var(--bg2,var(--bg,#fff)));border-radius:50%}
.reaction-stack-item+.reaction-stack-item{margin-left:calc(var(--reaction-size,17px)*-.25)}
.reaction-total{margin-left:5px}
.reaction-picker,.ms-reactions,.comment-context-reactions{display:flex;gap:4px;padding:6px;box-sizing:border-box;width:max-content;max-width:calc(100vw - 24px)}
.reaction-picker .reaction-option,.ms-reactions>button,.comment-context-reactions>button{width:40px;min-width:40px;height:44px;padding:2px;display:flex;align-items:center;justify-content:center;flex:none}
.reaction-picker .reaction-option>img,.comment-context-reactions>button>img{width:36px!important;height:36px!important;object-fit:contain}
.comment-reaction-summary,.ms-post-reaction-count,.as-reaction-count{display:inline-flex;align-items:center;gap:0}
@media(max-width:400px){.reaction-picker{left:0;right:auto;transform:none}.comment-context-card{padding:12px}.comment-context-reactions{padding:0}}
@media(max-width:400px){.reaction-picker.visible{transform:none}.comment-context-overlay{padding:12px}.comment-context-card{box-sizing:border-box;width:100%;padding:12px}.comment-context-reactions{max-width:none}}

/* The post summary moves into the comments sheet with its live card. */
#postCommentsModal .rcount .reaction-stack,#postCommentsModal .rcount .reaction-face{--reaction-size:18px!important}

/* Closed trays must be absent from keyboard navigation as well as pointer use. */
.reaction-picker{visibility:hidden}.reaction-picker.visible{visibility:visible}.reaction-option:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}

/* Labelled trays need room below the face and gentler corners than an icon pill. */
.reaction-picker{padding:8px;border-radius:18px;}
.reaction-picker .reaction-option{height:auto;min-height:54px;box-sizing:border-box;gap:2px;}
.reaction-picker .reaction-option .r-label{line-height:12px;flex:none;}
.reaction-picker .reaction-option>img{flex:none;}
.reaction-picker .reaction-option.active{background:transparent;}
.reaction-picker .reaction-option.active .r-label{color:var(--accent-primary);font-weight:700;}
/* Keep labels steady and inside the tray when pointing at a face. */
.reaction-picker .reaction-option:hover{transform:none;}
.reaction-picker .reaction-option:hover .r-label{color:var(--accent-primary);}

/* Let the seven options shrink together inside a clipped comments sheet. */
.reaction-picker{transition-property:opacity}
.reaction-picker .reaction-option{min-width:0;flex:1 1 40px}
.reaction-picker .reaction-option>img{width:min(36px,100%)!important;height:auto!important;aspect-ratio:1}
.reaction-picker .reaction-option .reaction-face{width:min(36px,100%);height:auto;aspect-ratio:1}
.reaction-picker .reaction-option .r-label{letter-spacing:0}