/* ===============================
   代码块容器和工具栏
   =============================== */

/* 代码块外层容器 */
.code-block-container {
  position: relative;
  margin: 1.5em 0;
}

/* ===============================
   顶部工具栏：语言标签 + 复制按钮
   重点：默认/hover 都同色，避免“默认白、hover 才深”
   =============================== */
.code-block-container .code-toolbar,
.code-block-container:hover .code-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0.5rem 1rem !important;

  background: rgba(60, 60, 60, 0.92) !important;
  border: 1px solid rgba(255, 82, 82, 0.28) !important;
  border-bottom: none !important;
  border-radius: 0.5rem 0.5rem 0 0 !important;

  backdrop-filter: blur(6px) !important;
}

/* 暗色模式：再更深一点 */
[data-theme="dark"] .code-block-container .code-toolbar,
[data-theme="dark"] .code-block-container:hover .code-toolbar {
  background: rgba(2, 6, 23, 0.78) !important;
  border-color: rgba(255, 82, 82, 0.38) !important;
}

/* 语言标签 */
.code-block-container .code-lang-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;

  color: rgba(255, 255, 255, 0.92) !important;
  padding: 0.25rem 0.5rem !important;

  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.4rem !important;
}

/* 复制按钮 */
.code-block-container .code-copy-btn {
  font-size: 12px !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 0.4rem !important;

  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 82, 82, 0.35) !important;

  cursor: pointer !important;
  transition: all 0.2s !important;
}

.code-block-container .code-copy-btn:hover {
  background: rgba(248, 113, 113, 0.25) !important;
  color: #fff !important;
}

/* ===============================
   代码块本身（只管圆角/间距，不碰 Chroma 配色）
   =============================== */
.code-block-container pre {
  margin: 0 !important;
  border-radius: 0 0 0.5rem 0.5rem !important;
  padding: 1.5rem !important;
}

/* ===============================
   代码折叠功能
   =============================== */

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

.code-content {
  max-height: none;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.code-content.collapsed {
  max-height: 8em; /* 大约5行 */
}

/* ===============================
   底部展开/收起按钮（你说的“下框”）
   同样：默认/hover 都同色，避免“默认白、hover 才深”
   =============================== */
.code-block-container .code-expand-btn,
.code-block-container:hover .code-expand-btn {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem !important;
  margin-top: -1px !important;

  background: rgba(60, 60, 60, 0.92) !important;
  border: 1px solid rgba(255, 82, 82, 0.28) !important;
  border-top: none !important;
  border-radius: 0 0 0.5rem 0.5rem !important;

  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;

  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
}

/* hover 你要更深一点也行（现在我让它轻微变深，不再“从白变黑”） */
.code-block-container .code-expand-btn:hover {
  background: rgba(60, 60, 60, 0.98) !important;
}

[data-theme="dark"] .code-block-container .code-expand-btn,
[data-theme="dark"] .code-block-container:hover .code-expand-btn {
  background: rgba(2, 6, 23, 0.78) !important;
  border-color: rgba(255, 82, 82, 0.38) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

[data-theme="dark"] .code-block-container .code-expand-btn:hover {
  background: rgba(2, 6, 23, 0.88) !important;
}