/*
 * Recovery layer for the interrupted Pulse refinements.
 * These rules are intentionally isolated so the existing interactions remain intact.
 */

:root {
  --pulse-pointer-glow: rgba(82, 171, 255, 0.11);
}

/* Let every token row and its hover treatment meet both column edges. */
article.token-card {
  position: relative;
  width: 100%;
  max-width: none;
  margin-inline: 0 !important;
  box-sizing: border-box;
  border-radius: 0;
}

article.token-card::before,
article.token-card::after {
  inset-inline: 0 !important;
  width: auto !important;
  border-radius: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
  article.token-card:hover {
    background:
      radial-gradient(
        circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
        var(--pulse-pointer-glow) 0,
        rgba(82, 171, 255, 0.045) 42%,
        transparent 78%
      ),
      var(--surface-card, transparent);
  }
}

/* Give the identity and metadata a little more room beside the token image. */
.token-card-top .token-identity {
  column-gap: 12px !important;
}

.token-card-top .token-avatar + * {
  margin-left: 2px;
}

/* Camera affordance: dim the original image and center a clean white camera. */
.token-avatar {
  position: relative;
  isolation: isolate;
}

.token-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  background: rgba(3, 10, 18, 0.48);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.token-avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  z-index: 5;
  translate: -50% -50%;
  scale: 0.9;
  opacity: 0;
  pointer-events: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 13 3.8h-2L9.5 5.5H6.2A2.2 2.2 0 0 0 4 7.7v8.1A2.2 2.2 0 0 0 6.2 18h11.6a2.2 2.2 0 0 0 2.2-2.2V7.7a2.2 2.2 0 0 0-2.2-2.2z'/%3E%3Ccircle cx='12' cy='11.7' r='3.2'/%3E%3C/svg%3E");
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
  transition: opacity 150ms ease, scale 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .token-avatar:hover::before,
  .token-avatar:hover::after {
    opacity: 1;
  }

  .token-avatar:hover::after {
    scale: 1;
  }
}

/* Remove the legacy off-centre badge without affecting the enlarged preview. */
.token-avatar > :is(
  .camera-badge,
  .token-camera-badge,
  .image-camera-badge,
  .token-image-camera,
  .camera-overlay,
  [data-camera-overlay]
) {
  display: none !important;
}

/* Restore a full-width, balanced footer instead of clustering everything right. */
:is(
  .app-footer,
  .statusbar,
  .status-bar,
  .status-footer,
  .footerbar,
  .footer-bar,
  .bottom-bar,
  .bottom-statusbar
) {
  width: 100%;
  min-width: 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  gap: 14px;
  box-sizing: border-box;
}

:is(
  .app-footer,
  .statusbar,
  .status-bar,
  .status-footer,
  .footerbar,
  .footer-bar,
  .bottom-bar,
  .bottom-statusbar
) :is(.footer-left, .status-left, .bottom-left) {
  margin-right: auto;
}

:is(
  .app-footer,
  .statusbar,
  .status-bar,
  .status-footer,
  .footerbar,
  .footer-bar,
  .bottom-bar,
  .bottom-statusbar
) :is(.footer-center, .status-center, .bottom-center) {
  margin-inline: auto;
}

:is(
  .app-footer,
  .statusbar,
  .status-bar,
  .status-footer,
  .footerbar,
  .footer-bar,
  .bottom-bar,
  .bottom-statusbar
) :is(.footer-right, .status-right, .bottom-right, .footer-actions) {
  margin-left: auto;
}

@media (hover: none), (pointer: coarse) {
  article.token-card:hover {
    background: inherit;
  }
}