.platform-reaction-root{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  vertical-align:middle;
  isolation:isolate;
}
.platform-reaction-main{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  padding:7px 11px;
  border:1px solid var(--line,#d9dde5);
  border-radius:999px;
  background:var(--card,#fff);
  color:var(--text,#111827);
  cursor:pointer;
  font-weight:800;
  line-height:1;
  box-shadow:0 5px 16px rgba(15,23,42,.06);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.platform-reaction-root.has-reaction .platform-reaction-main{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.platform-reaction-main:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(15,23,42,.12)}
.platform-reaction-main-icon{font-size:18px;line-height:1}
.platform-reaction-main-label{font-size:13px;white-space:nowrap}
.platform-reaction-flyout{
  display:none;
  align-items:center;
  gap:5px;
  position:fixed;
  z-index:999999;
  max-width:calc(100vw - 16px);
  padding:8px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:999px;
  background:rgba(255,255,255,.97);
  box-shadow:0 18px 45px rgba(15,23,42,.25);
  backdrop-filter:blur(12px);
  overflow:visible;
}
.platform-reaction-root.is-open .platform-reaction-flyout{display:flex}
.platform-reaction-option{
  width:42px;
  height:42px;
  border:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  line-height:1;
  transition:transform .15s ease, background .15s ease;
}
.platform-reaction-option span{font-size:25px;line-height:1}
.platform-reaction-option small{
  display:none;
  position:absolute;
  top:-28px;
  padding:4px 7px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
.platform-reaction-option:hover{transform:translateY(-7px) scale(1.18);background:rgba(15,23,42,.06)}
.platform-reaction-option:hover small{display:block}
.platform-reaction-summary{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:26px;
  font-size:12px;
  font-weight:800;
  color:var(--muted,#64748b);
}
.platform-reaction-icons{display:inline-flex;align-items:center}
.platform-reaction-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  margin-left:-5px;
  border:2px solid var(--card,#fff);
  border-radius:999px;
  background:#fff;
  font-size:12px;
  box-shadow:0 2px 7px rgba(15,23,42,.12);
}
.platform-reaction-chip:first-child{margin-left:0}
.platform-reaction-total:empty,.platform-reaction-summary:not(.has-count) .platform-reaction-total{opacity:.45}
.platform-reaction-root.is-busy{opacity:.75;pointer-events:none}
.platform-reaction-root.reaction-pop .platform-reaction-main-icon{animation:platformReactionPop .32s ease both}
@keyframes platformReactionPop{0%{transform:scale(.8)}55%{transform:scale(1.35)}100%{transform:scale(1)}}
.post-ucl-reaction-bar,.content-card-reaction-bar{margin-top:10px;margin-bottom:8px}
.content-interaction-bar .platform-reaction-root{margin-right:4px}
.platform-comment-reaction-bar .platform-reaction-main{min-height:26px;padding:4px 8px;font-size:12px;box-shadow:none}
.platform-comment-reaction-bar .platform-reaction-main-icon{font-size:15px}.platform-comment-reaction-bar .platform-reaction-main-label{font-size:12px}
.platform-comment-reaction-bar .platform-reaction-summary{font-size:11px}
@media (max-width:640px){
  .platform-reaction-main{min-height:32px;padding:6px 9px;gap:4px}
  .platform-reaction-main-label{font-size:12px}
  .platform-reaction-main-icon{font-size:17px}
  .platform-reaction-flyout{gap:2px;padding:6px;max-width:calc(100vw - 12px);border-radius:24px;flex-wrap:nowrap;overflow:hidden}
  .platform-reaction-option{width:36px;height:38px;flex:0 0 36px}
  .platform-reaction-option span{font-size:22px}
  .platform-reaction-summary{gap:3px;font-size:11px}
  .platform-reaction-chip{width:18px;height:18px;font-size:11px;border-width:1px}
}
@media (max-width:360px){
  .platform-reaction-main-label{display:none}
  .platform-reaction-option{width:32px;height:34px;flex-basis:32px}
  .platform-reaction-option span{font-size:20px}
  .platform-reaction-flyout{padding:5px}
}

.post-lightbox-platform-reaction{width:100%;justify-content:space-between;gap:12px;align-items:center}
.post-lightbox-platform-reaction .platform-reaction-summary{margin-left:auto}
.blog-single-reaction-bar{min-width:220px}
@media (max-width:640px){.post-lightbox-platform-reaction{align-items:flex-start}.post-lightbox-platform-reaction .platform-reaction-summary{margin-left:0;width:100%}.blog-single-reaction-bar{width:100%}}

.platform-reaction-reply-bar .platform-reaction-main{min-height:24px;padding:4px 7px;font-size:12px;box-shadow:none}
.platform-reaction-reply-bar .platform-reaction-main-icon{font-size:14px}.platform-reaction-reply-bar .platform-reaction-main-label{font-size:12px}
.platform-reaction-reply-bar .platform-reaction-summary{font-size:11px}


/* Reaction rebuild stability fix: one global viewport-safe flyout owns all pickers. */
.platform-reactions-ready .platform-reaction-root > .platform-reaction-flyout,
.platform-reactions-ready .platform-reaction-root [data-platform-reaction-flyout] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.platform-reaction-global-flyout {
  display: none;
  align-items: center;
  gap: 5px;
  position: fixed;
  left: -9999px;
  top: -9999px;
  z-index: 2147483000;
  max-width: calc(100vw - 16px);
  padding: 8px;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 999px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 45px rgba(15,23,42,.28);
  backdrop-filter: blur(12px);
  overflow: visible;
  pointer-events: auto;
}
.platform-reaction-global-flyout.is-open { display: flex; }
.platform-reaction-global-flyout .platform-reaction-option {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  line-height: 1;
  transition: transform .15s ease, background .15s ease;
  position: relative;
}
.platform-reaction-global-flyout .platform-reaction-option span { font-size: 25px; line-height: 1; }
.platform-reaction-global-flyout .platform-reaction-option small {
  display: none;
  position: absolute;
  top: -28px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.platform-reaction-global-flyout .platform-reaction-option:hover { transform: translateY(-7px) scale(1.18); background: rgba(15,23,42,.06); }
.platform-reaction-global-flyout .platform-reaction-option:hover small { display: block; }
.platform-reaction-root.is-open .platform-reaction-main {
  box-shadow: 0 10px 28px rgba(37,99,235,.18);
  border-color: rgba(37,99,235,.35);
}
@media (max-width:640px){
  .platform-reaction-global-flyout {
    gap: 2px;
    padding: 6px;
    max-width: calc(100vw - 12px);
    border-radius: 24px;
    overflow: hidden;
  }
  .platform-reaction-global-flyout .platform-reaction-option { width: 36px; height: 38px; flex: 0 0 36px; }
  .platform-reaction-global-flyout .platform-reaction-option span { font-size: 22px; }
  .platform-reaction-global-flyout .platform-reaction-option small { display: none !important; }
}
@media (max-width:360px){
  .platform-reaction-global-flyout { padding: 5px; }
  .platform-reaction-global-flyout .platform-reaction-option { width: 32px; height: 34px; flex-basis: 32px; }
  .platform-reaction-global-flyout .platform-reaction-option span { font-size: 20px; }
}