/* 代码笔记（codenote）样式的 scoped 版本，仅作用于官方题解 Tab。
 * 用 .codenote-textsol-body 替换原 codenote markdown-body.css 中的 .markdown-body，
 * 避免与 hydro 内置 .markdown-body 全局样式相互覆盖。
 * 源文件：codefun2000.CodeNote/MarkdownBody/public/codenote/markdown-body.css
 *
 * 通过 codenote_textsol.page.ts 按需 dynamic import，
 * 仅当题库设置 useCodenoteTextSolRender = true 且当前页面渲染了对应容器时才加载。
 */

.codenote-textsol-body {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400 !important;
  color: #010101;
  font-family: 'Noto Sans SC', system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei',
    sans-serif !important;
  width: 100%;
  box-sizing: border-box;
  will-change: opacity;
}

.codenote-textsol-body > * {
  animation: codenote-textsol-slideIn 0.3s ease;
}

@keyframes codenote-textsol-slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.codenote-textsol-body strong {
  font-weight: 700;
}

.codenote-textsol-body h1 {
  font-size: 32px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 24px;
  padding-bottom: 16px;
  color: #202124;
}

.codenote-textsol-body h2 {
  font-size: 26px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #202124;
}

.codenote-textsol-body h3 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 32px;
  margin-bottom: 16px;
  color: #3c4043;
}

.codenote-textsol-body h1,
.codenote-textsol-body h2,
.codenote-textsol-body h3 {
  font-family: inherit !important;
}

.codenote-textsol-body p {
  margin-bottom: 12px;
}

.codenote-textsol-body code {
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  color: #e83e8c;
}

.codenote-textsol-body pre {
  background: #282828;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  margin: 20px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
}

.codenote-textsol-body pre code {
  background: #282828;
  padding: 16px;
  display: block;
  overflow-x: auto;
  color: #e5e7eb !important;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.codenote-textsol-body pre.line-numbers {
  padding-left: 0;
  position: relative;
  /* 因为去掉了 prism-line-numbers.min.css，counter-reset 必须自己声明，
     否则 line-numbers-rows > span:before { content: counter(linenumber) } 会从全局累加。 */
  counter-reset: linenumber;
}

.codenote-textsol-body pre.line-numbers code {
  padding-left: 3.8em;
  padding-top: 16px;
  padding-bottom: 16px;
}

.codenote-textsol-body .line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 14px;
  line-height: 1.5;
  left: 0;
  width: 3em;
  padding-top: 16px;
  padding-bottom: 16px;
  letter-spacing: -1px;
  border-right: 1px solid #3a3a3a;
  user-select: none;
  background: #282828;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.codenote-textsol-body .line-numbers-rows > span {
  display: block;
  counter-increment: linenumber;
  color: #858585;
  padding-right: 0.8em;
  text-align: right;
  height: auto;
}

.codenote-textsol-body .line-numbers-rows > span:before {
  content: counter(linenumber);
}

.codenote-textsol-body pre:not([class*="language-"]) {
  background: #e3f2fd;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
}

.codenote-textsol-body pre:not([class*="language-"]) code {
  background: #e3f2fd;
  color: #1565c0;
  padding: 12px 16px !important;
}

.codenote-textsol-body pre[class*="language-"]::before {
  content: attr(data-language);
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 12px;
  font-size: 12px;
  color: #999;
  background: #2d2d2d;
  border-bottom-left-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.codenote-textsol-body pre[class*="language-python"]::before {
  content: "Python";
  color: #3776ab;
}

.codenote-textsol-body pre[class*="language-javascript"]::before {
  content: "JavaScript";
  color: #f7df1e;
}

.codenote-textsol-body pre[class*="language-typescript"]::before {
  content: "TypeScript";
  color: #3178c6;
}

.codenote-textsol-body pre[class*="language-java"]::before {
  content: "Java";
  color: #f89820;
}

.codenote-textsol-body pre[class*="language-cpp"]::before {
  content: "C++";
  color: #00599c;
}

.codenote-textsol-body pre[class*="language-c"]:not([class*="language-cpp"]):not([class*="language-csharp"])::before {
  content: "C";
  color: #555;
}

/* IDE 左侧滚动区本身带 .markdown-body，github-markdown 的 pre/code 会把
   代码笔记题解的内边距、背景和语言角标冲掉。这里用更具体的选择器压回去。 */
.markdown-body .codenote-textsol-body .code-switcher,
.markdown-body .codenote-textsol-body .simple-code-block {
  overflow: hidden;
  position: relative;
}

.markdown-body .codenote-textsol-body .code-switcher {
  background: #1e1e1e;
}

.markdown-body .codenote-textsol-body .code-switcher-tabs-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  width: 100%;
  height: 32px;
  background: #1e1e1e;
  overflow: hidden;
}

.markdown-body .codenote-textsol-body .code-switcher-tabs {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: auto;
  height: 100%;
}

.markdown-body .codenote-textsol-body .code-switcher-tab {
  display: inline-flex;
  align-items: center;
  width: auto;
  float: none;
}

.markdown-body .codenote-textsol-body .code-switcher pre,
.markdown-body .codenote-textsol-body .simple-code-block pre {
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}

.markdown-body .codenote-textsol-body .code-switcher pre {
  background: #1e1e1e !important;
  color: #e5e7eb;
}

.markdown-body .codenote-textsol-body .code-switcher pre code,
.markdown-body .codenote-textsol-body .code-switcher pre > code {
  background: #1e1e1e !important;
  color: #e5e7eb !important;
  padding: 16px !important;
  padding-left: 3.8em !important;
}

.markdown-body .codenote-textsol-body .simple-code-block pre code,
.markdown-body .codenote-textsol-body .simple-code-block pre > code {
  padding: 16px !important;
}

.markdown-body .codenote-textsol-body .code-switcher pre[class*="language-"]::before,
.markdown-body .codenote-textsol-body .simple-code-block pre[class*="language-"]::before {
  content: none !important;
  display: none !important;
}

.codenote-textsol-body pre code::-webkit-scrollbar {
  height: 8px;
}

.codenote-textsol-body pre code::-webkit-scrollbar-track {
  background: #2d2d2d;
  border-radius: 4px;
}

.codenote-textsol-body pre:not([class*="language-"]) code::-webkit-scrollbar-track {
  background: #bbdefb;
}

.codenote-textsol-body pre code::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

.codenote-textsol-body pre:not([class*="language-"]) code::-webkit-scrollbar-thumb {
  background: #1976d2;
}

.codenote-textsol-body pre code::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.codenote-textsol-body pre:not([class*="language-"]) code::-webkit-scrollbar-thumb:hover {
  background: #1565c0;
}

.codenote-textsol-body .code-toolbar .toolbar {
  display: none !important;
}

.codenote-textsol-body ul,
.codenote-textsol-body ol {
  padding-left: 24px;
  margin-bottom: 16px;
}

.codenote-textsol-body li {
  margin-bottom: 8px;
}

.codenote-textsol-body blockquote {
  border-left: 4px solid #3b82f6;
  padding-left: 16px;
  margin: 20px 0;
  color: #6b7280;
  font-style: italic;
}

.codenote-textsol-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}

.codenote-textsol-body video {
  max-width: 90%;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.codenote-textsol-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.codenote-textsol-body th,
.codenote-textsol-body td {
  border: 1px solid #e5e7eb;
  padding: 12px;
  text-align: left;
}

.codenote-textsol-body th {
  background: #f9fafb;
  font-weight: 600;
}

.codenote-textsol-body a {
  color: #3b82f6;
  text-decoration: none;
}

.codenote-textsol-body a:hover {
  text-decoration: underline;
}

.codenote-textsol-body tbody {
  background-color: #ffffff;
}

.codenote-textsol-body .note-box {
  border: 2px solid black;
  border-radius: 8px;
  padding: 8px 14px;
  width: 100%;
  margin: 12px 0;
  box-sizing: border-box;
}

.codenote-textsol-body .note-box p {
  margin: 0;
}

.codenote-textsol-body .note-box p + p {
  margin-top: 4px;
}

.codenote-textsol-body .info-box {
  background-color: #e3f2fd;
}

.codenote-textsol-body .warning-box {
  background-color: #fff3e0;
  border: 2px solid #ff9800;
}

.codenote-textsol-body .success-box {
  background-color: #e8f5e9;
  border: 2px solid #4caf50;
}

/* ==================== 暗色模式支持 ==================== */

.theme--dark .codenote-textsol-body {
  color: #c9d1d9;
}

.theme--dark .codenote-textsol-body h1,
.theme--dark .codenote-textsol-body h2 {
  color: #c9d1d9;
}

.theme--dark .codenote-textsol-body h3 {
  color: #c9d1d9;
}

.theme--dark .codenote-textsol-body code {
  background: #21262d;
  color: #ffa116;
}

.theme--dark .codenote-textsol-body pre:not([class*="language-"]) {
  background: #1c3a4f;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.theme--dark .codenote-textsol-body pre:not([class*="language-"]) code {
  background: #1c3a4f;
  color: #58a6ff;
}

.theme--dark .codenote-textsol-body pre:not([class*="language-"]) code::-webkit-scrollbar-track {
  background: #0d2a3d;
}

.theme--dark .codenote-textsol-body pre:not([class*="language-"]) code::-webkit-scrollbar-thumb {
  background: #1f6feb;
}

.theme--dark .codenote-textsol-body pre:not([class*="language-"]) code::-webkit-scrollbar-thumb:hover {
  background: #58a6ff;
}

.theme--dark .codenote-textsol-body li {
  color: #c9d1d9;
}

.theme--dark .codenote-textsol-body blockquote {
  color: #8b949e;
  border-left-color: #30363d;
}

.theme--dark .codenote-textsol-body th,
.theme--dark .codenote-textsol-body td {
  border-color: #30363d;
}

.theme--dark .codenote-textsol-body th {
  background: #21262d;
}

.theme--dark .codenote-textsol-body tbody {
  background-color: #161b22;
}

.theme--dark .codenote-textsol-body a {
  color: #58a6ff;
}

.theme--dark .codenote-textsol-body .note-box {
  border-color: #30363d;
}

.theme--dark .codenote-textsol-body .info-box {
  background-color: #1c3a4f;
}

.theme--dark .codenote-textsol-body .warning-box {
  background-color: #3d2a1a;
  border-color: #d29922;
}

.theme--dark .codenote-textsol-body .success-box {
  background-color: #1c3a1c;
  border-color: #3fb950;
}

/* ===========================================================================
 * 代码切换器（code-switcher）+ 单代码块（simple-code-block）+ 复制按钮
 * 源：codefun2000.CodeNote/MarkdownBody/public/codenote/code-switcher.css
 * 已把 .markdown-body 替换为 .codenote-textsol-body 做作用域隔离。
 * =========================================================================== */

.codenote-textsol-body .code-switcher {
  background: transparent;
  margin: 20px 0;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.codenote-textsol-body .code-switcher-tabs-container {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 8px;
  height: 32px;
  box-sizing: border-box;
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  margin-bottom: -1px;
}

.codenote-textsol-body .code-switcher-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 100%;
  margin-left: -8px;
  background: linear-gradient(180deg, #2d2d30 0%, #252526 100%);
  border-radius: 8px 8px 0 0;
  border: 1px solid #3a3a3a;
  border-bottom: none;
  box-sizing: border-box;
  pointer-events: auto;
}

.codenote-textsol-body .code-switcher-tab {
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  margin: 0;
  border-radius: 6px 6px 0 0;
  color: #969696;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.codenote-textsol-body .code-switcher-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e0e0e0;
}

.codenote-textsol-body .code-switcher-tab.active {
  background: #1e1e1e;
  color: #ffffff;
  font-weight: 600;
}

.codenote-textsol-body .code-switcher-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffa116, transparent);
  border-radius: 2px;
}

.codenote-textsol-body .code-switcher .code-panel {
  display: none;
  margin: 0;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
}

.codenote-textsol-body .code-switcher .code-panel.is-active {
  display: block;
}

.codenote-textsol-body .code-switcher .code-panel code {
  display: block;
  overflow-x: auto;
  color: #e5e7eb;
  font-size: 14px;
  line-height: 1.5;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.codenote-textsol-body .code-switcher pre {
  margin: 0;
  border-top-left-radius: 0 !important;
  border-radius: 0 0 8px 8px !important;
  background: #1e1e1e !important;
  border: 1px solid #3a3a3a !important;
  border-top: none !important;
}

/* 复制按钮 */
.codenote-textsol-body .code-copy-btn {
  position: absolute;
  top: 32px;
  right: 0px;
  padding: 6px 12px;
  background: #3a3a3a;
  border: 1px solid #4a4a4a;
  border-radius: 4px;
  color: #d4d4d4;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.codenote-textsol-body .simple-code-block .code-copy-btn {
  top: 8px;
  background: #1976d2 !important;
  border-color: #1565c0 !important;
  color: #ffffff;
}

.codenote-textsol-body .simple-code-block .code-copy-btn:hover {
  background: #1565c0;
  border-color: #0d47a1;
}

.codenote-textsol-body .code-copy-btn:hover {
  background: #4a4a4a;
  border-color: #5a5a5a;
  color: #ffffff;
}

.codenote-textsol-body .code-copy-btn:active {
  transform: scale(0.95);
}

.codenote-textsol-body .code-copy-btn.copied {
  background: #4caf50;
  border-color: #45a049;
  color: #ffffff;
}

.codenote-textsol-body .code-copy-btn::before {
  content: "📋";
  font-size: 14px;
}

.codenote-textsol-body .code-copy-btn.copied::before {
  content: "✓";
}

.codenote-textsol-body .code-switcher-tab.disabled {
  cursor: default;
  opacity: 0.8;
}

.codenote-textsol-body .code-switcher-tab.disabled:hover {
  background: transparent;
}

.codenote-textsol-body .code-switcher-tab.disabled.active {
  background: #282828;
  color: #ffffff;
  font-weight: 600;
}

/* ===========================================================================
 * Prism Tomorrow 主题（prism-tomorrow.min.css 1.29.0）的 scoped 副本。
 *
 * 注意：原 prism-tomorrow 还会对 pre/code 设置 padding / margin / background /
 * font-family 等"代码块外观"属性；codenote 的 markdown-body（上面已搬运）已经定义
 * 了 pre padding:0、code padding-left:3.8em、行号槽 left:0 一整套外观，与原 prism
 * 方案（pre padding-left:3.8em、行号槽 left:-3.8em 突出到 padding 之外）二选一。
 * 这里仅保留 token 颜色与一些必要的排版基础，删除会与 codenote 方案冲突的部分，
 * 否则 padding 会被叠加成两份、行号槽会被 pre 的 overflow:hidden 裁掉。
 *
 * line-numbers 插件的样式完全由上面 codenote markdown-body 段提供，这里不再
 * 重复贴 prism-line-numbers 的 scoped 副本（其 left:-3.8em 与 codenote 的 left:0
 * 思路相反）。
 * =========================================================================== */

.codenote-textsol-body code[class*="language-"],
.codenote-textsol-body pre[class*="language-"] {
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

.codenote-textsol-body :not(pre) > code[class*="language-"] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.codenote-textsol-body .token.block-comment,
.codenote-textsol-body .token.cdata,
.codenote-textsol-body .token.comment,
.codenote-textsol-body .token.doctype,
.codenote-textsol-body .token.prolog {
  color: #999;
}

.codenote-textsol-body .token.punctuation {
  color: #ccc;
}

.codenote-textsol-body .token.attr-name,
.codenote-textsol-body .token.deleted,
.codenote-textsol-body .token.namespace,
.codenote-textsol-body .token.tag {
  color: #e2777a;
}

.codenote-textsol-body .token.function-name {
  color: #6196cc;
}

.codenote-textsol-body .token.boolean,
.codenote-textsol-body .token.function,
.codenote-textsol-body .token.number {
  color: #f08d49;
}

.codenote-textsol-body .token.class-name,
.codenote-textsol-body .token.constant,
.codenote-textsol-body .token.property,
.codenote-textsol-body .token.symbol {
  color: #f8c555;
}

.codenote-textsol-body .token.atrule,
.codenote-textsol-body .token.builtin,
.codenote-textsol-body .token.important,
.codenote-textsol-body .token.keyword,
.codenote-textsol-body .token.selector {
  color: #cc99cd;
}

.codenote-textsol-body .token.attr-value,
.codenote-textsol-body .token.char,
.codenote-textsol-body .token.regex,
.codenote-textsol-body .token.string,
.codenote-textsol-body .token.variable {
  color: #7ec699;
}

.codenote-textsol-body .token.entity,
.codenote-textsol-body .token.operator,
.codenote-textsol-body .token.url {
  color: #67cdcc;
}

.codenote-textsol-body .token.bold,
.codenote-textsol-body .token.important {
  font-weight: 700;
}

.codenote-textsol-body .token.italic {
  font-style: italic;
}

.codenote-textsol-body .token.entity {
  cursor: help;
}

.codenote-textsol-body .token.inserted {
  color: green;
}