/* 代码块语法高亮增强样式 */

/* 基础代码块样式 */
.code-block-container {
  font-feature-settings: "liga" 1, "calt" 1;
}

/* JavaScript/TypeScript 语法高亮 */
.language-javascript .token.keyword,
.language-js .token.keyword,
.language-typescript .token.keyword,
.language-ts .token.keyword,
.language-jsx .token.keyword,
.language-tsx .token.keyword {
  color: #c792ea !important;
  font-weight: 500 !important;
}

.language-javascript .token.string,
.language-js .token.string,
.language-typescript .token.string,
.language-ts .token.string,
.language-jsx .token.string,
.language-tsx .token.string {
  color: #c3e88d !important;
}

.language-javascript .token.function,
.language-js .token.function,
.language-typescript .token.function,
.language-ts .token.function,
.language-jsx .token.function,
.language-tsx .token.function {
  color: #82aaff !important;
  font-weight: 500 !important;
}

.language-javascript .token.number,
.language-js .token.number,
.language-typescript .token.number,
.language-ts .token.number,
.language-jsx .token.number,
.language-tsx .token.number {
  color: #f78c6c !important;
}

.language-javascript .token.comment,
.language-js .token.comment,
.language-typescript .token.comment,
.language-ts .token.comment,
.language-jsx .token.comment,
.language-tsx .token.comment {
  color: #546e7a !important;
  font-style: italic !important;
}

.language-javascript .token.operator,
.language-js .token.operator,
.language-typescript .token.operator,
.language-ts .token.operator,
.language-jsx .token.operator,
.language-tsx .token.operator {
  color: #89ddff !important;
}

.language-javascript .token.punctuation,
.language-js .token.punctuation,
.language-typescript .token.punctuation,
.language-ts .token.punctuation,
.language-jsx .token.punctuation,
.language-tsx .token.punctuation {
  color: #89ddff !important;
}

.language-javascript .token.class-name,
.language-js .token.class-name,
.language-typescript .token.class-name,
.language-ts .token.class-name,
.language-jsx .token.class-name,
.language-tsx .token.class-name {
  color: #ffcb6b !important;
  font-weight: 500 !important;
}

.language-javascript .token.boolean,
.language-js .token.boolean,
.language-typescript .token.boolean,
.language-ts .token.boolean,
.language-jsx .token.boolean,
.language-tsx .token.boolean {
  color: #ff5370 !important;
}

/* HTML 语法高亮 */
.language-html .token.tag {
  color: #f07178 !important;
}

.language-html .token.attr-name {
  color: #c792ea !important;
  font-style: italic !important;
}

.language-html .token.attr-value {
  color: #c3e88d !important;
}

.language-html .token.punctuation {
  color: #89ddff !important;
}

.language-html .token.comment {
  color: #546e7a !important;
  font-style: italic !important;
}

/* CSS 语法高亮 */
.language-css .token.selector {
  color: #f07178 !important;
}

.language-css .token.property {
  color: #82aaff !important;
}

.language-css .token.string,
.language-css .token.url {
  color: #c3e88d !important;
}

.language-css .token.number {
  color: #f78c6c !important;
}

.language-css .token.comment {
  color: #546e7a !important;
  font-style: italic !important;
}

.language-css .token.function {
  color: #82aaff !important;
}

.language-css .token.important {
  color: #ff5370 !important;
  font-weight: bold !important;
}

/* JSON 语法高亮 */
.language-json .token.property {
  color: #82aaff !important;
}

.language-json .token.string {
  color: #c3e88d !important;
}

.language-json .token.number {
  color: #f78c6c !important;
}

.language-json .token.boolean {
  color: #ff5370 !important;
}

.language-json .token.null {
  color: #ff5370 !important;
}

.language-json .token.punctuation {
  color: #89ddff !important;
}

/* Python 语法高亮 */
.language-python .token.keyword {
  color: #c792ea !important;
  font-weight: 500 !important;
}

.language-python .token.string {
  color: #c3e88d !important;
}

.language-python .token.function {
  color: #82aaff !important;
  font-weight: 500 !important;
}

.language-python .token.number {
  color: #f78c6c !important;
}

.language-python .token.comment {
  color: #546e7a !important;
  font-style: italic !important;
}

.language-python .token.decorator {
  color: #ffcb6b !important;
}

.language-python .token.builtin {
  color: #ff5370 !important;
}

/* Bash/Shell 语法高亮 */
.language-bash .token.function,
.language-sh .token.function {
  color: #82aaff !important;
  font-weight: 500 !important;
}

.language-bash .token.string,
.language-sh .token.string {
  color: #c3e88d !important;
}

.language-bash .token.comment,
.language-sh .token.comment {
  color: #546e7a !important;
  font-style: italic !important;
}

.language-bash .token.variable,
.language-sh .token.variable {
  color: #f78c6c !important;
}

.language-bash .token.operator,
.language-sh .token.operator {
  color: #89ddff !important;
}

/* 通用语法高亮 */
.token.keyword {
  color: #c792ea !important;
  font-weight: 500 !important;
}

.token.string {
  color: #c3e88d !important;
}

.token.function {
  color: #82aaff !important;
  font-weight: 500 !important;
}

.token.number {
  color: #f78c6c !important;
}

.token.comment {
  color: #546e7a !important;
  font-style: italic !important;
}

.token.operator {
  color: #89ddff !important;
}

.token.punctuation {
  color: #89ddff !important;
}

.token.boolean {
  color: #ff5370 !important;
}

.token.null {
  color: #ff5370 !important;
}

.token.undefined {
  color: #ff5370 !important;
}

/* 特殊标记 */
.token.important {
  color: #ff5370 !important;
  font-weight: bold !important;
}

.token.bold {
  font-weight: bold !important;
}

.token.italic {
  font-style: italic !important;
}

/* 行号样式（如果使用） */
.line-numbers .line-numbers-rows {
  border-right: 1px solid rgba(51, 65, 85, 0.3) !important;
}

.line-numbers-rows > span:before {
  color: rgba(148, 163, 184, 0.6) !important;
}

/* 代码块动画效果 */
.code-block-container {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 复制按钮悬停效果 */
.copy-btn:hover {
  transform: translateY(-1px) scale(1.05);
}

.expand-btn:hover {
  transform: translateY(-1px) scale(1.02);
}

.collapse-btn:hover {
  transform: translateY(-1px) scale(1.02);
}

/* 响应式优化 */
@media (max-width: 768px) {
  .code-block-container {
    margin: 1rem 0;
    border-radius: 8px;
  }
  
  .copy-btn {
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.5rem;
  }
  
  .expand-btn {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
  }
  
  .collapse-btn {
    bottom: 0.5rem;
    right: 3rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
  }
}

/* 深色主题适配 */
@media (prefers-color-scheme: dark) {
  .code-block-container {
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 10px -3px rgba(0, 0, 0, 0.1);
  }
}