.hc-reactions{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;margin-top:22px;padding:18px 20px;overflow:clip}
.hc-reactions-heading{display:flex;align-items:center;gap:11px;min-width:190px}.hc-reactions-symbol{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:1px solid color-mix(in srgb,var(--hc-accent) 30%,var(--hc-border));border-radius:13px;background:color-mix(in srgb,var(--hc-accent) 12%,transparent);font-size:1.1rem}.hc-reactions-heading h2{margin:2px 0 0;font-size:1rem;line-height:1.2;letter-spacing:-.02em}.hc-reactions-heading .hc-eyebrow{font-size:.58rem}.hc-reactions-heading p{margin:4px 0 0;color:var(--hc-muted);font-size:.65rem;line-height:1.35}
.hc-reaction-buttons{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px;min-width:0}.hc-reaction-button{display:inline-grid;grid-template-columns:auto auto auto;align-items:center;gap:5px;min-width:0;min-height:40px;padding:7px 10px;border:1px solid var(--hc-border);border-radius:12px;background:color-mix(in srgb,var(--hc-surface-2) 72%,transparent);color:var(--hc-text);transition:transform var(--hc-transition),border-color var(--hc-transition),background var(--hc-transition),box-shadow var(--hc-transition)}.hc-reaction-button:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--hc-accent) 55%,var(--hc-border));background:color-mix(in srgb,var(--hc-accent) 9%,var(--hc-surface-2))}.hc-reaction-button.is-selected{border-color:var(--hc-accent-2);background:linear-gradient(145deg,color-mix(in srgb,var(--hc-accent) 17%,var(--hc-surface-2)),color-mix(in srgb,var(--hc-accent-2) 11%,var(--hc-surface-2)));box-shadow:0 9px 24px color-mix(in srgb,var(--hc-accent) 14%,transparent)}.hc-reaction-button:disabled{cursor:wait;opacity:.65}.hc-reaction-emoji{font-size:1.18rem;line-height:1}.hc-reaction-label{max-width:82px;overflow:hidden;color:var(--hc-text-soft);font-size:.64rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.hc-reaction-count{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:color-mix(in srgb,var(--hc-bg) 66%,transparent);font-size:.62rem}.hc-reaction-feedback{grid-column:1/-1;min-height:0;margin:0;color:var(--hc-accent-2);font-size:.68rem;font-weight:800;text-align:right}.hc-reaction-feedback:empty{display:none}.hc-reactions.is-loading{opacity:.76}
.hc-reactions-minimal{grid-template-columns:1fr;padding:14px 16px}.hc-reactions-minimal .hc-reactions-heading{min-width:0}.hc-reactions-minimal .hc-reactions-symbol,.hc-reactions-minimal .hc-eyebrow,.hc-reactions-minimal .hc-reactions-heading p{display:none}.hc-reactions-minimal .hc-reactions-heading h2{font-size:.84rem}.hc-reactions-minimal .hc-reaction-buttons{justify-content:flex-start}
.hc-reactions-comfortable{grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr);gap:24px;padding:24px}.hc-reactions-comfortable .hc-reactions-symbol{width:48px;height:48px;flex-basis:48px}.hc-reactions-comfortable .hc-reactions-heading h2{font-size:1.25rem}.hc-reactions-comfortable .hc-reaction-button{grid-template-columns:1fr;justify-items:center;min-width:86px;min-height:78px;padding:10px}.hc-reactions-comfortable .hc-reaction-emoji{font-size:1.45rem}.hc-reactions-comfortable .hc-reaction-count{position:static}
.hc-reactions-no-labels .hc-reaction-button{grid-template-columns:auto auto}.hc-reactions-no-labels .hc-reaction-label{display:none}
@media(max-width:860px){.hc-reactions,.hc-reactions-comfortable{grid-template-columns:1fr;gap:13px}.hc-reaction-buttons{justify-content:flex-start}.hc-reaction-feedback{text-align:left}}
@media(max-width:560px){.hc-reactions{padding:15px}.hc-reactions-heading{min-width:0}.hc-reactions-symbol{width:36px;height:36px;flex-basis:36px}.hc-reaction-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.hc-reaction-button{grid-template-columns:auto auto;justify-content:center;padding:7px 6px}.hc-reaction-label{display:none}.hc-reactions-comfortable .hc-reaction-button{min-width:0;min-height:58px}.hc-reactions-comfortable .hc-reaction-label{display:block;max-width:100%}}
@media(max-width:360px){.hc-reaction-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}}