/* Copy button styles */
.copy-button {
  position: absolute;
  top: 12px;
  right: 18px;
  background-color: #333;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
  font-family: monospace;
}

.highlight:hover .copy-button {
  opacity: 1;
}

.copy-button:hover {
  background-color: #555;
}

/* Scrollable code blocks with specific selector to prevent conflicts */
.article-content-wrapper .highlight,
.pico-prose .highlight {
  position: relative;
  max-width: 100%;
  margin: 1em 0;
  transition: max-height 0.3s ease;
  overflow-x: auto;
  border-radius: 4px;
}

.article-content-wrapper .highlight.long-highlight,
.pico-prose .highlight.long-highlight {
  max-height: 300px;
  overflow-y: hidden;
  overflow-x: auto;
}

.article-content-wrapper .highlight.long-highlight.expanded,
.pico-prose .highlight.long-highlight.expanded {
  max-height: none;
}

/* Override any conflicting container styles */
.article-content-wrapper .highlight pre,
.pico-prose .highlight pre {
  margin: 0 !important;
  white-space: pre-wrap !important;  /* Preserve formatting but allow wrapping */
  word-wrap: break-word !important;  /* Break long lines to prevent overflow */
  overflow-x: auto !important;
  display: block !important;
}

/* Ensure code blocks don't break layout */
.article-content-wrapper .highlight .code,
.pico-prose .highlight code,
.article-content-wrapper .highlight pre,
.pico-prose .highlight pre {
  max-width: 100% !important;
  overflow-x: auto !important;
  display: block !important;
  line-height: 1.4 !important;
}

/* Optional: Add a scroll indicator */
.article-content-wrapper .highlight::after,
.pico-prose .highlight::after {
  content: "↔";
  position: absolute;
  right: 5px;
  bottom: 5px;
  font-size: 12px;
  color: #999;
  opacity: 0.7;
  pointer-events: none;
  z-index: 15;
}

/* Expand button for long code blocks */
.code-expand-btn {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  z-index: 20;
  display: block;
  font-family: sans-serif;
}

.article-content-wrapper .highlight.long-highlight .code-expand-btn,
.pico-prose .highlight.long-highlight .code-expand-btn {
  display: block;
}

.article-content-wrapper .highlight.long-highlight.expanded .code-expand-btn,
.pico-prose .highlight.long-highlight.expanded .code-expand-btn {
  display: none;
}