/* JINXYR shared chrome: component ID tags + version switcher.
   Single writer: orchestrator only. Versions must not edit this file. */

:root {
  --jx-purple: #a855f7;
  --jx-purple-2: #7c3aed;
  --jx-pink: #ec4899;
  --jx-ink: #000;
}

/* Any element carrying data-jx gets a tag; needs a positioned host. */
.jx-host { position: relative; }

.jx-tag.jx-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 9px;
  font: 500 11px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  color: #f3e8ff;
  background: rgba(0, 0, 0, .72);
  border: 1px solid rgba(168, 85, 247, .75);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(168, 85, 247, .35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  user-select: none;
  text-transform: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.jx-tag.jx-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--jx-purple);
  box-shadow: 0 0 8px var(--jx-purple);
}
.jx-tag.jx-tag:hover {
  transform: translateY(-1px) scale(1.04);
  background: rgba(88, 28, 135, .85);
  box-shadow: 0 0 22px rgba(168, 85, 247, .7);
}
.jx-tag.jx-tag.is-copied { background: rgba(34, 197, 94, .85); border-color: #22c55e; }
.jx-tag.jx-tag.is-copied::before { background: #fff; box-shadow: none; }

/* Placement overrides: data-jx-pos="tl|tr|bl|br" */
.jx-tag.jx-tag[data-pos="tl"] { right: auto; left: 10px; }
.jx-tag.jx-tag[data-pos="bl"] { top: auto; bottom: 10px; right: auto; left: 10px; }
.jx-tag.jx-tag[data-pos="br"] { top: auto; bottom: 10px; }

/* Press T to hide all tags. */
body.jx-hide-tags .jx-tag.jx-tag { display: none; }

/* Version switcher pill, bottom-left. */
.jx-switch {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  font: 600 12px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0, 0, 0, .8);
  border: 1px solid rgba(168, 85, 247, .6);
  border-radius: 999px;
  box-shadow: 0 0 24px rgba(124, 58, 237, .45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.jx-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  color: #d8b4fe;
  text-decoration: none;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.jx-switch a:hover { background: rgba(168, 85, 247, .25); color: #fff; }
.jx-switch a.is-current {
  color: #fff;
  background: linear-gradient(135deg, var(--jx-purple-2), var(--jx-pink));
  box-shadow: 0 0 12px rgba(236, 72, 153, .6);
}
.jx-switch .jx-switch-label {
  padding: 0 8px 0 10px;
  color: rgba(216, 180, 254, .7);
  letter-spacing: .12em;
  font-size: 10px;
}
.jx-switch .jx-switch-hint {
  padding: 0 10px 0 6px;
  color: rgba(216, 180, 254, .45);
  font-size: 10px;
  letter-spacing: .06em;
}
@media (max-width: 640px) {
  .jx-switch .jx-switch-hint { display: none; }
  .jx-tag.jx-tag { font-size: 10px; padding: 4px 7px; }
}

/* Shared toast stack (optional helper used by JX.toasts) */
.jx-toasts {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9400;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.jx-toast {
  max-width: 320px;
  padding: 10px 14px;
  font: 500 13px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #fff;
  background: rgba(20, 0, 40, .92);
  border: 1px solid rgba(168, 85, 247, .7);
  border-left: 3px solid var(--jx-pink);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 18px rgba(168, 85, 247, .35);
  animation: jx-toast-in .35s cubic-bezier(.2, .9, .3, 1.2) both;
}
.jx-toast.is-leaving { animation: jx-toast-out .3s ease forwards; }
@keyframes jx-toast-in { from { opacity: 0; transform: translateX(30px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes jx-toast-out { to { opacity: 0; transform: translateX(30px); } }

/* Background FX hosts (IDs ending in 14) are pointer-events:none fixed layers:
   keep their badge clickable and lift it above the switcher. */
[data-jx$="14"] > .jx-tag.jx-tag { pointer-events: auto; }
[data-jx$="14"] > .jx-tag.jx-tag[data-pos="bl"] { bottom: 64px; }