/* ===============================================
   CODE BLOCK COPY BUTTON
   =============================================== */

.code-block-wrapper {
  position: relative;
}

.copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  color: #a0aec0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

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

/* Always show on touch devices */
@media (hover: none) {
  .copy-button {
    opacity: 0.7;
  }
}

.copy-button:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
}

.copy-button:active {
  transform: scale(0.95);
}

.copy-button.copied {
  background: rgba(72, 187, 120, 0.2);
  border-color: rgba(72, 187, 120, 0.4);
  color: #68d391;
}

.copy-button svg {
  display: block;
}