/* Clean and Minimal Code Block Styling */

/* Clean code block styling */
pre {
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  margin: 1rem 0;
  font-size: 14px;
  line-height: 1.45;
}

pre code {
  background: transparent;
  color: #24292e;
  font-family: 'JetBrains Mono', Consolas, Monaco, 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.45;
  display: block;
  white-space: pre;
  word-break: normal;
  word-wrap: normal;
}

/* Inline code styling */
:not(pre) > code {
  background-color: rgba(175, 184, 193, 0.2);
  color: #0550ae;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 85%;
  font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
  white-space: normal;
  word-break: break-word;
}

/* Simple syntax colors - no language detection needed */
.token.comment { 
  color: #6a737d;
  font-style: italic;
}

.token.string { 
  color: #032f62;
}

.token.keyword { 
  color: #d73a49;
  font-weight: 500;
}

.token.function { 
  color: #6f42c1;
}

.token.number,
.token.boolean { 
  color: #005cc5;
}

.token.operator,
.token.punctuation { 
  color: #24292e;
}

.token.class-name,
.token.constant { 
  color: #e36209;
}

/* Subtle hover effect */
pre:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  border-color: #c8d1db;
}

/* Responsive design */
@media (max-width: 640px) {
  pre {
    font-size: 12px;
    padding: 12px;
  }
  
  pre code {
    font-size: 12px;
  }
}

/* Scrollbar styling for code blocks */
pre::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

pre::-webkit-scrollbar-track {
  background: transparent;
}

pre::-webkit-scrollbar-thumb {
  background: rgba(139, 148, 158, 0.2);
  border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 148, 158, 0.4);
}

/* Firefox scrollbar */
pre {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 148, 158, 0.2) transparent;
}

/* Ensure no pseudo-elements add unwanted content */
pre::before,
pre::after,
code::before,
code::after {
  content: none !important;
  display: none !important;
}

/* Hide any child elements that aren't code or explain AI buttons */
pre > *:not(code):not(.explain-ai-btn) {
  display: none !important;
}

/* Ensure clean display without any labels or buttons */
pre[class*="language-"]::before,
pre[class*="language-"]::after,
pre[data-language]::before,
pre[data-language]::after {
  content: none !important;
  display: none !important;
}