/* Base inline code styling */
.content p code,
.content li code,
.content td code,
.description code,
.intro-content code,
.intro p code,
.summary p code {
  font-family: 'Ubuntu Mono', monospace !important;
  background: rgba(15, 15, 15, 0.95) !important;
  color: var(--highlight-color) !important;
  padding: 0px 5px 0px 25px !important; /* Increased left padding to 24px */
  border-radius: 3px !important;
  font-size: 0.95em !important;
  position: relative !important;
  display: inline-block !important;
  line-height: 1.3 !important;
  margin: 0 2px !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  transition: all 0.2s ease !important;
}

/* Terminal prompt effect */
.content p code::before,
.content li code::before,
.content td code::before,
.description code::before,
.intro-content code::before,
.intro p code::before,
.summary p code::before {
  content: '$~' !important;
  color: var(--highlight-color) !important;
  position: absolute !important;
  left: 4px !important; /* Slightly moved prompt right */
  opacity: 0.7 !important;
  transition: all 0.2s ease !important;
  z-index: 1 !important;
  font-size: 0.9em !important;
  text-shadow: 0 0 5px rgba(237, 41, 57, 0.3) !important; /* Subtle glow only for prompt */
  letter-spacing: -0.5px !important; /* Tighten the $~ characters */
  padding-right: 4px !important; /* Added padding after the prompt */
}

/* Hover effects */
.content p code:hover,
.content li code:hover,
.content td code:hover,
.description code:hover,
.intro-content code:hover,
.intro p code:hover,
.summary p code:hover {
  background: rgba(20, 20, 20, 0.95) !important;
}

/* Prompt hover effect */
.content p code:hover::before,
.content li code:hover::before,
.content td code:hover::before,
.description code:hover::before,
.intro-content code:hover::before,
.intro p code:hover::before,
.summary p code:hover::before {
  opacity: 1 !important;
  color: #98C379 !important; /* Matrix-style green */
  text-shadow: 0 0 8px rgba(152, 195, 121, 0.5) !important; /* Green glow */
}

/* Remove old tooltip styles */
.content p code::after,
.content li code::after,
.content td code::after {
    display: none !important;
}

/* Inline code tooltip specific styles */
.code-tooltip-wrapper {
    position: relative !important;
    display: inline-block !important;
}

.code-tooltip {
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translate(-50%, 5px) !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;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.2s ease !important;
    z-index: 1000 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    width: auto !important;
    max-width: min(280px, calc(100vw - 40px)) !important;
    min-width: 160px !important;
}

/* Add CODE label and arrow */
.code-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;
}

/* (Optional: if you support vertical flipping) */
.code-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;
}

.code-tooltip-content::before {
    content: 'CODE' !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;
    z-index: 1 !important; /* Ensure label stays above */
}

.code-tooltip.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
}

.code-tooltip-content {
    margin-top: 8px !important; /* Add space for the label */
    padding: 4px 6px !important;
    background: #141414 !important;
    border-radius: 3px !important;
    border: 1px solid #222 !important;
    position: relative !important; /* Ensure relative positioning for absolute label */
}

.code-tooltip::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -20px !important;
    height: 20px !important;
    background: transparent !important;
}

.code-tooltip-wrapper:hover .code-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
    pointer-events: auto !important;
}

.code-tooltip-actions {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 8px !important;
}

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

/* Enhance copy button states */
.code-tooltip-copy:hover {
    background: #2a2a2a !important;
    border-color: #555 !important;
}

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

/* Mobile styles */
@media (max-width: 768px) {
    .code-tooltip {
        left: 0 !important;
        transform: translateY(5px) !important;
        max-width: calc(100vw - 40px) !important;
    }

    .code-tooltip.show {
        transform: translateY(0) !important;
    }

    .code-tooltip-wrapper:hover .code-tooltip {
        transform: translate(0, 0) !important;
    }
}