/* Code block with copy button */
.code-wrapper {
  position: relative;
  margin: 1.5rem 0;
}

.code-wrapper pre {
  margin: 0;
}

.copy-code-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  z-index: 10;
}

.code-wrapper:hover .copy-code-button {
  opacity: 1;
}

.copy-code-button:hover {
  background: #fff;
  border-color: #999;
}

.copy-code-button.copied {
  background: #4caf50;
  color: white;
  border-color: #4caf50;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .copy-code-button {
    background: rgba(40, 40, 40, 0.9);
    border-color: #555;
    color: #ddd;
  }

  .copy-code-button:hover {
    background: #333;
    border-color: #777;
  }

  .copy-code-button.copied {
    background: #4caf50;
    color: white;
    border-color: #4caf50;
  }
}