/* ChatGPT-like code block */
.code-block-wrap{
  position:relative;
  margin:24px 0;
  border:1px solid #e5e7eb;
  border-radius:24px;
  overflow:hidden;
  background:#f7f7f8;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}

.code-block-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:58px;
  padding:0 18px;
  background:#f7f7f8;
  border-bottom:1px solid #ececec;
}

.code-block-meta{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:#111827;
}

.code-block-icon{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#111827;
  flex:0 0 auto;
}

.code-block-icon svg,
.code-copy-btn svg{
  width:18px;
  height:18px;
}

.code-block-lang{
  font-size:1rem;
  line-height:1;
  font-weight:500;
  color:#111827;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.code-copy-btn{
  appearance:none;
  border:0;
  background:transparent;
  color:#111827;
  border-radius:10px;
  min-height:36px;
  padding:6px 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:.95rem;
  line-height:1;
  transition:background-color .2s ease,color .2s ease,opacity .2s ease;
  flex:0 0 auto;
}

.code-copy-btn:hover{
  background:rgba(0,0,0,.06);
}

.code-copy-btn:focus-visible{
  outline:2px solid rgba(37,99,235,.4);
  outline-offset:2px;
}

.code-copy-btn.is-copied{
  color:#166534;
}

.code-copy-btn span{
  display:none;
}

.code-block-wrap pre,
.wznrys .code-block-wrap pre{
  margin:0;
  padding:20px 28px 24px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:auto;
  word-break:normal;
  overflow-wrap:normal;
}

.code-block-wrap pre:before,
.wznrys .code-block-wrap pre:before{
  display:none !important;
}

.code-block-wrap pre code,
.wznrys .code-block-wrap pre code,
.wznrys pre code.hljs{
  display:block;
  padding:0;
  margin:0;
  background:transparent;
  color:#111827;
  font-size:15px;
  line-height:1.8;
  font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
  -webkit-font-smoothing:auto;
  tab-size:4;
}

.wznrys :not(pre) > code{
  padding:.16em .42em;
  border-radius:6px;
  background:#eceff3;
  color:#0f172a;
  font-size:.9em;
}

.code-block-wrap pre code::-webkit-scrollbar,
.code-block-wrap pre::-webkit-scrollbar{
  height:10px;
  width:10px;
}

.code-block-wrap pre code::-webkit-scrollbar-thumb,
.code-block-wrap pre::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.15);
  border-radius:999px;
}

.code-block-wrap pre code::-webkit-scrollbar-track,
.code-block-wrap pre::-webkit-scrollbar-track{
  background:transparent;
}

/* Light theme token colors */
.hljs-comment,.hljs-quote{color:#6b7280;}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-section,.hljs-link{color:#7c3aed;}
.hljs-string,.hljs-attr,.hljs-regexp,.hljs-addition{color:#0f766e;}
.hljs-number,.hljs-symbol,.hljs-bullet,.hljs-variable,.hljs-template-variable{color:#b45309;}
.hljs-title,.hljs-title.class_,.hljs-title.function_,.hljs-name,.hljs-tag{color:#1d4ed8;}
.hljs-type,.hljs-built_in,.hljs-doctag{color:#c2410c;}
.hljs-meta{color:#4f46e5;}
.hljs-deletion{color:#b91c1c;}
.hljs-emphasis{font-style:italic;}
.hljs-strong{font-weight:700;}

.dark .code-block-wrap{
  border-color:rgba(255,255,255,.08);
  background:#2f2f2f;
  box-shadow:none;
}

.dark .code-block-toolbar{
  background:#2f2f2f;
  border-bottom-color:rgba(255,255,255,.08);
}

.dark .code-block-meta,
.dark .code-block-icon,
.dark .code-block-lang,
.dark .code-copy-btn{
  color:#f3f4f6;
}

.dark .code-copy-btn:hover{
  background:rgba(255,255,255,.08);
}

.dark .code-copy-btn.is-copied{
  color:#86efac;
}

.dark .code-block-wrap pre code,
.dark .wznrys pre code.hljs{
  color:#f9fafb;
}

.dark .wznrys :not(pre) > code{
  background:#1f2937;
  color:#e5e7eb;
}

.dark .code-block-wrap pre code::-webkit-scrollbar-thumb,
.dark .code-block-wrap pre::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
}

/* Dark theme token colors */
.dark .hljs-comment,.dark .hljs-quote{color:#9ca3af;}
.dark .hljs-keyword,.dark .hljs-selector-tag,.dark .hljs-literal,.dark .hljs-section,.dark .hljs-link{color:#c084fc;}
.dark .hljs-string,.dark .hljs-attr,.dark .hljs-regexp,.dark .hljs-addition{color:#5eead4;}
.dark .hljs-number,.dark .hljs-symbol,.dark .hljs-bullet,.dark .hljs-variable,.dark .hljs-template-variable{color:#fbbf24;}
.dark .hljs-title,.dark .hljs-title.class_,.dark .hljs-title.function_,.dark .hljs-name,.dark .hljs-tag{color:#93c5fd;}
.dark .hljs-type,.dark .hljs-built_in,.dark .hljs-doctag{color:#fdba74;}
.dark .hljs-meta{color:#a5b4fc;}
.dark .hljs-deletion{color:#fca5a5;}

@media (max-width: 767px){
  .code-block-wrap{
    border-radius:18px;
  }

  .code-block-toolbar{
    min-height:52px;
    padding:0 14px;
  }

  .code-block-lang{
    font-size:.95rem;
  }

  .code-block-wrap pre,
  .wznrys .code-block-wrap pre{
    padding:16px 16px 20px;
  }

  .code-block-wrap pre code,
  .wznrys .code-block-wrap pre code,
  .wznrys pre code.hljs{
    font-size:14px;
    line-height:1.7;
  }
}