/**
 * PromXAI prompt identity badges — canonical owner (test213).
 *
 * Owns only PRO / Featured identity geometry and motion across prompt cards.
 * Extracted from pro-preview-consistency.css during pre-final hardening so
 * protection blur and identity badges no longer share one stylesheet owner.
 */

/* ========================================================================
   PromXAI Theme 2.0.21-test213 — canonical two-slot identity rail.

   Root-cause hardening:
   - Geometry is a two-column grid, never physical/logical left/right offsets.
   - Visibility reads the CARD identity, not duplicated state on the layer.
   - Locked is always treated as PRO, even before JavaScript reconciliation.
   - The same rail is used inside Home, phone Home and Favorites media frames.
   ======================================================================== */
.px-prompt-identity-layer {
  position:absolute !important;
  z-index:48 !important;
  inset:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  grid-template-rows:max-content 1fr !important;
  align-items:start !important;
  gap:10px !important;
  width:100% !important;
  height:100% !important;
  padding:10px !important;
  box-sizing:border-box !important;
  pointer-events:none !important;
  overflow:hidden !important;
  direction:ltr !important;
}

.px-prompt-identity-layer > .px-prompt-identity-badge {
  position:relative !important;
  inset:auto !important;
  z-index:1 !important;
  width:64px !important;
  min-width:64px !important;
  height:28px !important;
  min-height:28px !important;
  margin:0 !important;
  padding:0 8px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:999px !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  isolation:isolate !important;
  color:#fff !important;
  font:900 10px/1 Inter,"IBM Plex Sans Arabic",sans-serif !important;
  letter-spacing:.08px !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
  pointer-events:none !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
  -webkit-backdrop-filter:blur(12px) saturate(135%) !important;
  backdrop-filter:blur(12px) saturate(135%) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
  display:none !important;
}

.px-prompt-identity-layer > .px-prompt-identity-badge.is-pro {
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:start !important;
  background:#6558ed !important;
  background-image:linear-gradient(120deg,#3677ef 0%,#7257ef 58%,#c447d0 100%) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18),0 8px 20px rgba(124,58,237,.24) !important;
}

.px-prompt-identity-layer > .px-prompt-identity-badge.is-featured {
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:end !important;
  background:#df5f37 !important;
  background-image:linear-gradient(135deg,#ef7b22 0%,#ef476f 100%) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18),0 8px 20px rgba(236,72,153,.18) !important;
}

/* Card state is the only presentation truth. Explicit selectors avoid browser-specific :is() cascade differences. */
.px-prompt-card.is-pro .px-prompt-identity-layer > .px-prompt-identity-badge.is-pro,
.px-prompt-card.is-locked .px-prompt-identity-layer > .px-prompt-identity-badge.is-pro,
.px-prompt-card[data-prompt-pro="1"] .px-prompt-identity-layer > .px-prompt-identity-badge.is-pro,
.px-phone-home-card.is-pro .px-prompt-identity-layer > .px-prompt-identity-badge.is-pro,
.px-phone-home-card.is-locked .px-prompt-identity-layer > .px-prompt-identity-badge.is-pro,
.px-phone-home-card[data-prompt-pro="1"] .px-prompt-identity-layer > .px-prompt-identity-badge.is-pro,
.px-fav-card--prompt.is-pro .px-prompt-identity-layer > .px-prompt-identity-badge.is-pro,
.px-fav-card--prompt.is-locked .px-prompt-identity-layer > .px-prompt-identity-badge.is-pro,
.px-fav-card--prompt[data-prompt-pro="1"] .px-prompt-identity-layer > .px-prompt-identity-badge.is-pro,
.px-related-mini.is-pro .px-prompt-identity-layer > .px-prompt-identity-badge.is-pro,
.px-related-mini.is-locked .px-prompt-identity-layer > .px-prompt-identity-badge.is-pro,
.px-related-mini[data-prompt-pro="1"] .px-prompt-identity-layer > .px-prompt-identity-badge.is-pro {
  display:inline-flex !important;
}

.px-prompt-card.is-featured .px-prompt-identity-layer > .px-prompt-identity-badge.is-featured,
.px-prompt-card[data-prompt-featured-state="1"] .px-prompt-identity-layer > .px-prompt-identity-badge.is-featured,
.px-phone-home-card.is-featured .px-prompt-identity-layer > .px-prompt-identity-badge.is-featured,
.px-phone-home-card[data-prompt-featured-state="1"] .px-prompt-identity-layer > .px-prompt-identity-badge.is-featured,
.px-fav-card--prompt.is-featured .px-prompt-identity-layer > .px-prompt-identity-badge.is-featured,
.px-fav-card--prompt[data-prompt-featured-state="1"] .px-prompt-identity-layer > .px-prompt-identity-badge.is-featured,
.px-related-mini.is-featured .px-prompt-identity-layer > .px-prompt-identity-badge.is-featured,
.px-related-mini[data-prompt-featured-state="1"] .px-prompt-identity-layer > .px-prompt-identity-badge.is-featured {
  display:inline-flex !important;
}

/* One restrained premium shimmer. Paint only: no geometry / CLS. */
.px-prompt-identity-layer > .px-prompt-identity-badge::after,
.px-pro-badge::after,
.px-featured-badge::after {
  content:"";
  position:absolute;
  z-index:2;
  top:-45%;
  bottom:-45%;
  left:-48%;
  width:30%;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.06) 25%,rgba(255,255,255,.72) 50%,rgba(255,255,255,.08) 74%,transparent 100%);
  filter:blur(.2px);
  transform:translateX(-180%) rotate(8deg);
  animation:pxPremiumBadgeShine 4.2s cubic-bezier(.35,.05,.2,1) infinite;
}
.px-prompt-identity-layer > .px-prompt-identity-badge.is-featured::after,
.px-featured-badge::after { animation-delay:.55s; }

.px-pro-badge,
.px-featured-badge {
  overflow:hidden;
  isolation:isolate;
}

@keyframes pxPremiumBadgeShine {
  0%,56% { transform:translateX(-180%) rotate(8deg);opacity:0; }
  61% { opacity:.86; }
  78% { transform:translateX(520%) rotate(8deg);opacity:.52; }
  82%,100% { transform:translateX(520%) rotate(8deg);opacity:0; }
}

@media (max-width:760px) {
  .px-prompt-identity-layer {
    gap:12px !important;
    padding:10px !important;
  }
  .px-prompt-identity-layer > .px-prompt-identity-badge {
    width:50px !important;
    min-width:50px !important;
    height:24px !important;
    min-height:24px !important;
    padding:0 5px !important;
    font-size:9px !important;
  }
}


/* test458 iPad / touch-tablet badge compositor stabilization. */
html.px-touch-tablet .px-prompt-identity-layer > .px-prompt-identity-badge,
html.px-touch-tablet .px-prompt-card__skill-badge {
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html.px-touch-tablet .px-prompt-identity-layer > .px-prompt-identity-badge::after,
html.px-touch-tablet .px-pro-badge::after,
html.px-touch-tablet .px-featured-badge::after,
html.px-touch-tablet .px-prompt-card__skill-badge::after {
  animation:none!important;
  display:none!important;
}

@media (prefers-reduced-motion:reduce) {
  .px-prompt-identity-layer > .px-prompt-identity-badge::after,
  .px-pro-badge::after,
  .px-featured-badge::after {
    animation:none !important;
    display:none !important;
  }
}

/* test417 — linked Skill owns the exact physical Featured slot; PRO remains the opposite slot. */
.px-prompt-card.has-linked-skill .px-prompt-identity-layer > .px-prompt-identity-badge.is-featured{display:none !important}
.px-prompt-card__skill-badge{
  position:absolute;z-index:52;top:10px;right:10px;left:auto;
  width:64px;min-width:64px;height:28px;min-height:28px;margin:0;padding:0 8px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(149,255,207,.30);border-radius:999px;
  background:#14865d;background-image:linear-gradient(135deg,#11945f 0%,#23bd7f 100%);color:#fff;
  -webkit-backdrop-filter:blur(12px) saturate(135%);backdrop-filter:blur(12px) saturate(135%);
  box-shadow:0 8px 18px rgba(0,0,0,.18),0 8px 20px rgba(23,178,115,.18);
  font:900 10px/1 Inter,"IBM Plex Sans Arabic",sans-serif;white-space:nowrap;box-sizing:border-box;
  pointer-events:none;overflow:hidden;isolation:isolate;
}
.px-prompt-card__skill-badge::after{content:"";position:absolute;z-index:2;top:-45%;bottom:-45%;left:-48%;width:30%;pointer-events:none;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.05) 25%,rgba(255,255,255,.62) 50%,rgba(255,255,255,.07) 74%,transparent 100%);transform:translateX(-180%) rotate(8deg);animation:pxPremiumBadgeShine 4.2s .55s cubic-bezier(.35,.05,.2,1) infinite}
html[data-theme="light"] .px-prompt-card__skill-badge{border-color:rgba(25,153,101,.24);background:#159e68;background-image:linear-gradient(135deg,#14945f,#21b879);color:#fff;box-shadow:0 7px 18px rgba(20,120,83,.16)}
@media(max-width:760px){.px-prompt-card__skill-badge{top:10px;right:10px;left:auto;width:50px;min-width:50px;height:24px;min-height:24px;padding:0 5px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.px-prompt-card__skill-badge::after{animation:none;display:none}}