/* 代码块折叠效果 */
.highlight {
  position: relative;
  margin: 1em 0;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* 默认折叠状态 - 显示一行，第二行渐变模糊 */
.highlight.collapsed > .code pre {
  max-height: 2.4em; /* 大约显示1.5行 */
  overflow: hidden;
  mask-image: linear-gradient(to bottom, 
    rgba(0, 0, 0, 1) 0%, 
    rgba(0, 0, 0, 0.8) 1.2em, 
    rgba(0, 0, 0, 0.4) 1.8em, 
    rgba(0, 0, 0, 0) 2.4em
  );
  -webkit-mask-image: linear-gradient(to bottom, 
    rgba(0, 0, 0, 1) 0%, 
    rgba(0, 0, 0, 0.8) 1.2em, 
    rgba(0, 0, 0, 0.4) 1.8em, 
    rgba(0, 0, 0, 0) 2.4em
  );
}

/* 展开状态 */
.highlight.expanded > .code pre {
  max-height: none;
  mask-image: none;
  -webkit-mask-image: none;
}

/* 代码区域预格式化文本 */
.highlight pre {
  position: relative;
  margin: 0;
  padding: 1em;
  transition: max-height 0.3s ease, mask-image 0.3s ease;
  overflow-x: auto;
}

/* 展开/折叠按钮样式 - 放在复制按钮左侧 */
.code-toggle {
  position: absolute;
  right: 2.8em; /* 放置在复制按钮左侧 */
  top: 0.6em;
  z-index: 15;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 0.3em 0.6em;
  font-size: 0.75em;
  cursor: pointer;
  color: #555;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.code-toggle:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 折叠状态下的按钮指示 */
.code-toggle.collapsed::after {
  content: "→";
  font-weight: bold;
}

/* 展开状态下的按钮指示 */
.code-toggle.expanded::after {
  content: "←";
  font-weight: bold;
}

/* 确保复制按钮位置正确且始终可见 */
.highlight .copy-btn {
  position: absolute;
  right: 0.6em;
  top: 0.6em;
  z-index: 15;
  opacity: 1 !important;
  visibility: visible !important;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 0.3em 0.6em;
  font-size: 0.75em;
  color: #555;
  transition: all 0.2s ease;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.highlight .copy-btn:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 暗色主题适配 */
[data-user-color-scheme='dark'] .code-toggle,
[data-user-color-scheme='dark'] .copy-btn {
  background: rgba(60, 60, 60, 0.9);
  color: #ccc;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-user-color-scheme='dark'] .code-toggle:hover,
[data-user-color-scheme='dark'] .copy-btn:hover {
  background: rgba(60, 60, 60, 1);
}

/* 为代码块添加轻微阴影提升层次感 */
.highlight {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

[data-user-color-scheme='dark'] .highlight {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .code-toggle, .copy-btn {
    right: 0.5em;
    top: 0.5em;
    font-size: 0.7em;
  }
  
  .code-toggle {
    right: 2.5em;
  }
}