/* Prism + VS Code Dark+ (1:1), mac-toolbar + line-numbers + copy + collapse */

/* ========== Base ========== */
code[class*="language-"],
pre[class*="language-"] {
  color: #d4d4d4; /* editor.foreground */
  background: none;
  font-family: "Avro", "Menlo", "Consolas", "Monaco", "Courier New", monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.6;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code background = VS Code editor background */
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #202020; /* editor.background */
}

pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid #2d2d2d; /* panel border-ish */
}

/* Selection */
pre[class*="language-"] ::selection,
pre[class*="language-"]::selection,
code[class*="language-"] ::selection,
code[class*="language-"]::selection {
  background: #264f78; /* editor.selectionBackground */
  color: inherit;
}

/* ========== Plugins: Line Numbers ========== */
pre[class*="language-"].line-numbers {
  position: relative;
  padding-left: 3.4em;
  counter-reset: linenumber;
}
pre[class*="language-"].line-numbers > code {
  position: relative;
  white-space: inherit;
}
.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: -3.4em;
  width: 3.2em;
  font-size: 100%;
  letter-spacing: -1px;
  border-right: 1px solid #2d2d2d;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.line-numbers-rows > span {
  display: block;
  counter-increment: linenumber;
}
.line-numbers-rows > span:before {
  content: counter(linenumber);
  display: block;
  padding-right: 0.8em;
  text-align: right;
  color: #858585; /* editorLineNumber.foreground */
}

/* ========== Plugins: Inline Color (keep) ========== */
span.inline-color-wrapper {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4=)
    center / 110% no-repeat;
  display: inline-block;
  height: 1.333ch;
  width: 1.333ch;
  margin: 0 0.333ch;
  box-sizing: border-box;
  border: 1px solid #fff;
  outline: 1px solid rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
span.inline-color {
  display: block;
  height: 120%;
  width: 120%;
}

/* ========== mac-style Toolbar (separate block, seamless) ========== */
div.code-toolbar {
  position: relative;
}

/* toolbar block (on top, no gap) */
div.code-toolbar > .toolbar {
  position: static;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  padding: 0.35rem 0.5rem;
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  border-radius: 8px 8px 0 0;
  opacity: 1 !important;
}

/* merge with pre */
div.code-toolbar > pre[class*="language-"] {
  margin-top: 0;
  border: 1px solid #2d2d2d;
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

/* layout */
div.code-toolbar > .toolbar > .toolbar-item.mac-dots {
  margin-right: auto;
}
div.code-toolbar > .toolbar > .toolbar-item.show-language {
  margin: 0 auto;
}
div.code-toolbar > .toolbar > .toolbar-item.copy-to-clipboard {
  margin-left: auto;
}

/* mac dots */
.mac-dots .mac-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}
div.code-toolbar > .toolbar .mac-dots .mac-dot.red {
  background: #ff5f57 !important;
}
div.code-toolbar > .toolbar .mac-dots .mac-dot.yellow {
  background: #febc2e !important;
}
div.code-toolbar > .toolbar .mac-dots .mac-dot.green {
  background: #28c840 !important;
}

/* toolbar items baseline */
div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
  background: transparent;
  color: #ddd;
  box-shadow: none;
}

/* no hover effects (global) */
div.code-toolbar > .toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > span:hover {
  background: transparent;
  color: inherit;
  box-shadow: none;
  opacity: 1;
  transform: none;
}

/* copy button hover/focus */
div.code-toolbar > .toolbar > .toolbar-item.copy-to-clipboard > button:hover,
div.code-toolbar
  > .toolbar
  > .toolbar-item.copy-to-clipboard
  > button:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  border-radius: 6px;
}

/* copy button (Font Awesome icons) */
div.code-toolbar > .toolbar > .toolbar-item.copy-to-clipboard > button {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
div.code-toolbar
  > .toolbar
  > .toolbar-item.copy-to-clipboard
  > button
  .icon-copy {
  color: #ddd;
  font-size: 16px;
}
div.code-toolbar
  > .toolbar
  > .toolbar-item.copy-to-clipboard
  > button
  .icon-check {
  display: none;
  color: #28c840 !important;
  font-size: 16px;
}
div.code-toolbar
  > .toolbar
  > .toolbar-item.copy-to-clipboard
  > button[data-copy-state="copied"]
  .icon-copy {
  display: none;
}
div.code-toolbar
  > .toolbar
  > .toolbar-item.copy-to-clipboard
  > button[data-copy-state="copied"]
  .icon-check {
  display: inline-block !important;
}

/* language label */
div.code-toolbar > .toolbar > .toolbar-item.show-language > span {
  font-weight: 600;
  letter-spacing: 0.02em;
}
div.code-toolbar > .toolbar > .toolbar-item.show-language > span:hover {
  color: #fff;
}

/* ========== Collapse (>20 lines) ========== */
.code-toolbar.collapsible.is-collapsed > pre[class*="language-"] {
  max-height: 30em;
  overflow: hidden;
  position: relative;
}
.code-toolbar.collapsible.is-collapsed > pre[class*="language-"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3rem;
  background: linear-gradient(
    to bottom,
    rgba(30, 30, 30, 0) 0%,
    rgba(30, 30, 30, 0.9) 100%
  );
  pointer-events: none;
}
.code-toolbar .code-collapse-toggle {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 11;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  color: #ddd;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  cursor: pointer;
}

/* ========== VS Code Dark+ Tokens (strict mapping) ========== */
/* comments */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6a9955;
}

/* punctuation/operators = foreground */
.token.punctuation,
.token.operator {
  color: #d4d4d4;
}

/* keywords / at-rules */
.token.keyword,
.token.atrule {
  color: #c586c0;
}

/* blue group: tags/selectors/builtins/namespaces/booleans */
.token.boolean,
.token.selector,
.token.tag,
.token.builtin,
.token.namespace {
  color: #569cd6;
}

/* functions / methods */
.token.function,
.token.method {
  color: #dcdcaa;
}

/* classes / types / constants */
.token.class-name,
.token.constant,
.token.type {
  color: #4ec9b0;
}

/* numbers */
.token.number,
.token.unit {
  color: #b5cea8;
}

/* strings / chars / attr-values / inserted / template-strings */
.token.string,
.token.char,
.token.attr-value,
.token.inserted,
.token.template-string {
  color: #ce9178;
}
.token.template-punctuation {
  color: #d4d4d4;
}

/* identifiers: properties/variables/params/symbols/attr-names/entity/url */
.token.property,
.token.variable,
.token.parameter,
.token.symbol,
.token.attr-name,
.token.entity,
.token.url {
  color: #9cdcfe;
}

/* regex */
.token.regex {
  color: #d16969;
}

/* important */
.token.important {
  color: #c586c0;
}

/* emphasis */
.token.bold,
.token.important {
  font-weight: 700;
}
.token.italic {
  font-style: italic;
}
.token.entity {
  cursor: help;
}

/* ========== Responsive Design - Mobile Optimization ========== */
@media (max-width: 768px) {
  /* 代码块整体调整 */
  pre[class*="language-"] {
    font-size: 0.9em;
    padding: 0.8em;
    margin: 0.5em -12px; /* 负边距，让代码块接近屏幕边缘 */
    border-radius: 0; /* 移除边角，更接近移动端风格 */
  }

  /* 行号区域缩小 */
  pre[class*="language-"].line-numbers {
    padding-left: 2.8em;
  }

  .line-numbers .line-numbers-rows {
    left: -2.8em;
    width: 2.6em;
    font-size: 0.85em;
  }

  /* Mac 风格工具栏按钮适配 */
  .prism-mac-dots .dot {
    width: 10px;
    height: 10px;
  }

  /* 工具栏按钮适配 */
  .prism-toolbar-wrap {
    padding: 6px 8px;
    gap: 6px;
  }

  .prism-toolbar-btn {
    padding: 4px 10px;
    font-size: 11px;
  }

  /* 复制按钮适配 */
  .prism-copy-btn {
    padding: 4px 10px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  /* 超小屏优化 */
  pre[class*="language-"] {
    font-size: 0.85em;
    padding: 0.6em;
    margin: 0.5em -16px; /* 更大的负边距 */
    overflow-x: auto; /* 确保横向滚动 */
    -webkit-overflow-scrolling: touch; /* 平滑滚动 */
  }

  code[class*="language-"],
  pre[class*="language-"] {
    line-height: 1.5; /* 行高缩小 */
  }

  /* 行号进一步缩小 */
  pre[class*="language-"].line-numbers {
    padding-left: 2.4em;
  }

  .line-numbers .line-numbers-rows {
    left: -2.4em;
    width: 2.2em;
    font-size: 0.8em;
  }

  .line-numbers-rows > span:before {
    padding-right: 0.6em;
  }

  /* 工具栏按钮进一步缩小 */
  .prism-toolbar-wrap {
    padding: 4px 6px;
    gap: 4px;
  }

  .prism-toolbar-btn,
  .prism-copy-btn {
    padding: 3px 8px;
    font-size: 10px;
  }

  /* Mac 风格工具栏适配 */
  .prism-mac-dots .dot {
    width: 8px;
    height: 8px;
  }

  .prism-mac-title {
    font-size: 10px;
  }

  /* 折叠按钮适配 */
  .code-collapse-btn {
    font-size: 11px;
  }
}