/*
 * PromXAI RC48 — Global Favorite Heart Feedback
 *
 * One interaction language for every favorite trigger on phone, laptop and
 * desktop. The halo is positioned around the actual heart glyph using CSS
 * variables measured by app.js, so wide action tiles never receive a rotating
 * rectangle.
 */

[data-favorite-id].is-favorite-feedback {
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
  --px-fav-feedback-x: 50%;
  --px-fav-feedback-y: 50%;
  --px-fav-feedback-size: 34px;
}

[data-favorite-id].is-favorite-feedback::before,
[data-favorite-id].is-favorite-feedback::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: var(--px-fav-feedback-x);
  top: var(--px-fav-feedback-y);
  width: var(--px-fav-feedback-size);
  height: var(--px-fav-feedback-size);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
}

/* Soft brand bloom, intentionally brief and local to the heart. */
[data-favorite-id].is-favorite-feedback::before {
  border: 1px solid rgb(112 132 255 / .66);
  background: radial-gradient(circle, rgb(82 117 255 / .19) 0 42%, transparent 70%);
  box-shadow: 0 0 0 0 rgb(89 113 255 / .24), 0 0 18px rgb(92 101 255 / .16);
  animation: px-favorite-global-halo .58s cubic-bezier(.20,.78,.24,1) both;
}

/* A short circular orbit replaces the historic rounded-rectangle sync ring. */
[data-favorite-id].is-favorite-feedback::after {
  width: calc(var(--px-fav-feedback-size) - 3px);
  height: calc(var(--px-fav-feedback-size) - 3px);
  border: 2px solid rgb(111 140 255 / .13);
  border-top-color: #6f8cff;
  border-right-color: rgb(222 75 204 / .78);
  box-shadow: 0 0 14px rgb(94 112 255 / .20);
  animation: px-favorite-global-orbit .58s cubic-bezier(.22,.66,.30,1) both;
}

[data-favorite-id].is-favorite-feedback :is(svg,.px-icon) {
  position: relative;
  z-index: 5;
  transform-origin: center;
  animation: px-favorite-global-pop .42s cubic-bezier(.18,.85,.25,1.35) both;
}

@keyframes px-favorite-global-halo {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.70); box-shadow: 0 0 0 0 rgb(89 113 255 / .24); }
  48%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.34); box-shadow: 0 0 0 8px rgb(89 113 255 / 0); }
}

@keyframes px-favorite-global-orbit {
  0%   { opacity: .18; transform: translate(-50%, -50%) rotate(0deg) scale(.84); }
  52%  { opacity: .94; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(300deg) scale(1.08); }
}

@keyframes px-favorite-global-pop {
  0%   { transform: scale(.84); }
  58%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Server persistence is optimistic and runs in the background. Never draw a
 * second geometry around the whole control while the snapshot is syncing. */
[data-favorite-id].is-syncing::after {
  display: none !important;
  content: none !important;
}

[data-favorite-id].is-syncing :is(svg,.px-icon) {
  opacity: 1 !important;
}


/* test222 — one saved-heart glyph contract everywhere. The button surface may
 * differ by component, but a saved heart itself is always a fully filled glyph
 * using the component's currentColor, matching the canonical Prompt card. */
[data-favorite-id]:is(.is-saved, [aria-pressed="true"]) :is(svg, .px-icon),
[data-favorite-id]:is(.is-saved, [aria-pressed="true"]) path {
  fill: currentColor !important;
  stroke: currentColor !important;
}


@media (prefers-reduced-motion: reduce) {
  [data-favorite-id].is-favorite-feedback::before,
  [data-favorite-id].is-favorite-feedback::after,
  [data-favorite-id].is-favorite-feedback :is(svg,.px-icon) {
    animation: none !important;
  }
}