/* Icon-only button CSS */
.copyable-field-container {
    position: relative;
    margin: var(--space-4) 0;
  }
  
  .instructions-box pre {
    padding: var(--space-4);
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    font-family: monospace;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--color-gray-800);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    cursor: pointer;
    transition: border-color var(--transition-fast) var(--ease-in-out), 
                background-color var(--transition-fast) var(--ease-in-out);
  }
  
  .copyable-field-container:hover pre {
    border-color: var(--color-gray-300);
    background-color: rgba(249, 250, 251, 0.8);
  }
  
  /* Icon-only copy button */
  .copy-button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast) var(--ease-in-out);
    box-shadow: var(--shadow-sm);
    z-index: 5;
  }
  
  .copy-button:hover {
    background-color: var(--color-gray-50);
    border-color: var(--color-gray-400);
    color: var(--color-primary);
  }
  
  /* Success state for button */
  .copy-button.success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: white;
  }
  
  /* Success flash for pre element */
  .pre-copied {
    animation: successFlash 1s ease;
  }
  
  @keyframes successFlash {
    0% { background-color: var(--color-gray-50); }
    30% { background-color: rgba(209, 250, 229, 0.6); }
    100% { background-color: var(--color-gray-50); }
  }
  
  /* Mobile adjustments */
  @media (max-width: 767px) {
    .instructions-box pre {
      padding: var(--space-3);
      font-size: 14px;
    }
    
    .copy-button {
      width: 28px;
      height: 28px;
      top: 6px;
      right: 6px;
      font-size: var(--font-size-xs);
    }
  }