/* Tooltip container */
.cyber-tooltip-container {
  position: relative !important;
  display: inline-block !important;
}

/* Tooltip box */
.cyber-tooltip {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  /* left will be set dynamically via JS */
  transform: translateY(5px) !important;
  transform-origin: center bottom !important;
  padding: 8px 10px !important;
  background: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  color: #ccc !important;
  font-family: 'Ubuntu Mono', monospace !important;
  font-size: 0.75rem !important;
  white-space: normal !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
  z-index: 1000 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
  border-radius: 4px !important;
  width: auto !important;
  max-width: min(280px, calc(100vw - 40px)) !important;
  min-width: 160px !important;
  word-break: break-word !important;
  will-change: transform, opacity !important;
}

/* Ensure consistent font size */
.cyber-tooltip,
.cyber-tooltip * {
  font-size: 0.75rem !important;
}

/* Dynamic arrow – its horizontal offset is set via the CSS variable --arrow-left */
.cyber-tooltip::before {
  content: '' !important;
  position: absolute !important;
  bottom: -3px !important;
  left: var(--arrow-left, 50%) !important;
  transform: translateX(-50%) rotate(45deg) !important;
  width: 6px !important;
  height: 6px !important;
  background: #1a1a1a !important;
  border-right: 1px solid #333 !important;
  border-bottom: 1px solid #333 !important;
  z-index: -1 !important;
}

/* When there isn’t enough space above, flip the tooltip and arrow */
.cyber-tooltip.edge-bottom::before {
  bottom: auto !important;
  top: -3px !important;
  left: var(--arrow-left, 50%) !important;
  transform: translateX(-50%) rotate(45deg) !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: 1px solid #333 !important;
  border-top: 1px solid #333 !important;
}

/* Tooltip inner content */
.cyber-tooltip-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}

/* URL text styling */
.cyber-tooltip-url {
  position: relative !important;
  padding: 4px 6px !important;
  background: #141414 !important;
  border-radius: 3px !important;
  color: #999 !important;
  font-size: 0.85em !important;
  line-height: 1.3 !important;
  word-break: break-all !important;
  border: 1px solid #222 !important;
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
}

.cyber-tooltip-url::before {
  content: 'URL' !important;
  position: absolute !important;
  top: -8px !important;
  left: 10px !important;
  background: #1a1a1a !important;
  padding: 0 6px !important;
  font-size: 0.7em !important;
  color: #666 !important;
  letter-spacing: 0.5px !important;
  opacity: 0.8 !important;
}

/* Action buttons */
.cyber-tooltip-actions {
  display: flex !important;
  gap: 4px !important;
  justify-content: flex-end !important;
  margin-top: 2px !important;
}

.cyber-tooltip-copy,
.cyber-tooltip-visit {
  background: #242424 !important;
  border: 1px solid #333 !important;
  color: #ccc !important;
  padding: 4px 8px !important;
  font-size: 0.85em !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  border-radius: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 65px !important;
  justify-content: center !important;
}

.cyber-tooltip-copy:hover,
.cyber-tooltip-visit:hover {
  background: #2a2a2a !important;
  border-color: #555 !important;
}

.cyber-tooltip-copy.copied {
  background: #1a3320 !important;
  border-color: #2a5a2a !important;
  color: #98C379 !important;
}

/* Show tooltip */
.cyber-tooltip.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.cyber-tooltip.show::before {
  animation: diamond-pulse 2s infinite !important;
}

/* Hover “bridge” */
.cyber-tooltip::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -20px !important;
  height: 20px !important;
  background: transparent !important;
}

@keyframes diamond-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(237, 41, 57, 0.4) !important;
  }
  70% {
    box-shadow: 0 0 0 6px rgba(237, 41, 57, 0) !important;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(237, 41, 57, 0) !important;
  }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .cyber-tooltip {
    min-width: 140px !important;
    width: min(260px, calc(100vw - 20px)) !important;
    margin: 0 auto !important;
    /* Let JS handle left positioning */
  }
  
  .cyber-tooltip.show {
    transform: translateY(0) !important;
  }
  
  .cyber-tooltip-url {
    max-width: calc(100vw - 40px) !important;
    overflow-wrap: break-word !important;
  }
  
  @media (max-width: 360px) {
    .cyber-tooltip-actions {
      flex-direction: column !important;
      gap: 4px !important;
    }
    
    .cyber-tooltip-copy,
    .cyber-tooltip-visit {
      width: 100% !important;
    }
  }
}