/* Reusable popover component
   Shadow uses filter: drop-shadow on the container so it follows
   the composite shape (body + arrow) uniformly on all sides. */
.ak-popover {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 150ms ease-out, transform 150ms ease-out;
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08))
    drop-shadow(0 4px 12px rgba(0, 0, 0, 0.12));
}

.ak-popover--visible {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
}

.ak-popover--hiding {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 100ms ease-in, transform 100ms ease-in;
}

/* Body */
.ak-popover__body {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  max-width: 320px;
  font-family: inherit;
}

/* Arrow — rotated square, shadow handled by parent drop-shadow */
.ak-popover__arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  transform: rotate(45deg);
}

/* Arrow positions per direction */
.ak-popover--top .ak-popover__arrow {
  bottom: -5px;
  left: 50%;
  margin-left: -5px;
}

.ak-popover--bottom .ak-popover__arrow {
  top: -5px;
  left: 50%;
  margin-left: -5px;
}

.ak-popover--right .ak-popover__arrow {
  left: -5px;
  top: 50%;
  margin-top: -5px;
}

.ak-popover--left .ak-popover__arrow {
  right: -5px;
  top: 50%;
  margin-top: -5px;
}

/* Content layout: info row + actions row */
.ak-popover__info {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
  margin-bottom: 10px;
  word-break: break-all;
}

.ak-popover__info-label {
  color: #6b7280;
  font-weight: 400;
}

.ak-popover__actions {
  display: flex;
  gap: 8px;
}

.ak-popover__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
}

.ak-popover__btn:hover {
  background: rgba(241, 102, 35, 0.08);
  border-color: #f16623;
  color: #f16623;
}

.ak-popover__btn:active {
  transform: scale(0.97);
}

.ak-popover__btn:focus-visible {
  outline: 2px solid rgba(241, 102, 35, 0.45);
  outline-offset: 2px;
}

.ak-popover__btn--copied {
  background: rgba(22, 163, 74, 0.08);
  border-color: #15803d;
  color: #15803d;
}

.ak-popover__btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ak-popover {
    transition: opacity 100ms ease-out;
    transform: none;
  }
  .ak-popover--hiding {
    transition: opacity 80ms ease-in;
    transform: none;
  }
}