@import "../../plugins/Latex/style.acss";
/* 微信 / 支付宝共享的通用 Markdown 元素样式（单一来源）。
 *
 * 构建时 scripts/copy-component-assets.mjs 把本文件「内联拼接」到各端
 * MiniNodeRenderer/index.{wxss,acss} 输出的开头（不产出独立分片、不用 @import —— 在含
 * index.json 的组件目录放裸 .wxss 分片会让微信「构建 npm」编译器崩溃 getDevCodeByFileList）。
 *
 * 为什么挂在 MiniNodeRenderer 而不是 <Markdown>：节点真正在 MiniNodeRenderer 内渲染，
 * 而 styleIsolation:shared 不会把 <Markdown> 的样式传播给「嵌套在段落里的二级
 * MiniNodeRenderer」，只有组件自身样式表才能命中任意深度的节点。
 *
 * 这里只放两端完全一致的「元素级」样式；动画、链接按压态(md-link--active)、
 * 以及表格 / 代码块 / 代码高亮 / LaTeX 等平台分叉样式仍各自留在对应文件里。 */

/* 标题 */
.md-heading {
  display: block;
  font-weight: bold;
  line-height: 1.3;
  margin: 24rpx 0 12rpx;
}
.md-h1 { font-size: 44rpx; }
.md-h2 { font-size: 38rpx; }
.md-h3 { font-size: 34rpx; }
.md-h4 { font-size: 30rpx; }
.md-h5 { font-size: 28rpx; }
.md-h6 { font-size: 26rpx; color: #666; }

/* 段落 */
.md-paragraph {
  display: block;
  margin: 0 0 16rpx;
}

/* 引用 */
.md-blockquote {
  display: block;
  margin: 12rpx 0;
  padding: 8rpx 16rpx;
  border-left: 6rpx solid #d9d9d9;
  color: #555;
  background: #fafafa;
}

/* 列表 */
.md-list {
  display: block;
  margin: 8rpx 0 16rpx;
  padding-left: 32rpx;
}
.md-list-item {
  display: flex;
  align-items: flex-start;
  margin: 4rpx 0;
}
.md-list-marker {
  flex: 0 0 28rpx;
  width: 28rpx;
  margin-right: 8rpx;
  line-height: 1.65;
  text-align: center;
}
.md-list-content {
  display: block;
  flex: 1;
  min-width: 0;
}

/* 分隔线 */
.md-hr {
  display: block;
  height: 2rpx;
  background: #e5e5e5;
  margin: 16rpx 0;
}

/* 行内强调 */
.md-strong { font-weight: bold; }
.md-em { font-style: italic; }
.md-del,
.md-s { text-decoration: line-through; }

/* 链接：留在兄弟文本流中保持行内排版 */
.md-link {
  display: inline;
  color: #1677ff;
  text-decoration: underline;
}

/* 行内代码：留出内外间距，避免药丸贴住前后文字。
   字体（md-inline-code-txt）与药丸盒（背景/内外边距/圆角）拆成两类：
   流式逐字/逐段动画会把一个行内代码文本节点拆成多个叶子 <text>，若每个叶子都带
   盒模型就会各自变成一颗药丸、中间出现空隙——所以盒模型只画在外层容器（整段的
   <text>/<view>），拆出来的字符叶子只带 md-inline-code-txt 字体类（支付宝 <text>
   不继承 font-family，字体必须留在叶子上）。 */
.md-inline-code,
.md-inline-code-txt {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 26rpx;
}
.md-inline-code {
  background: #f3f3f3;
  padding: 2rpx 8rpx;
  margin: 0 4rpx;
  border-radius: 4rpx;
}

/* 图片 */
.md-img {
  display: block;
  max-width: 100%;
  margin: 16rpx 0;
  border-radius: 12rpx;
}

/* 表格/代码块横向滚动的左右边缘阴影（公用样式，两端共用）。
   用绝对定位的 overlay <view> 而非 ::before/::after 伪元素——小程序自定义组件里
   伪元素在真机/嵌套渲染层不可靠（微信表格阴影曾因此不显示）。本文件构建时内联进
   MiniNodeRenderer 的 wxss/acss，能触达深层渲染的表格，无论是否经高层 Markdown 组件。 */
.markdownx-table-content {
  position: relative;
  overflow: hidden;
}
.markdownx-edge-shadow {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 24rpx;
  pointer-events: none;
  border-radius: 0;
  opacity: 0;
}
.markdownx-edge-shadow--visible {
  opacity: 1;
}
.markdownx-edge-shadow-left {
  left: 0;
  background: linear-gradient(90deg, rgba(51, 51, 51, 0.16), rgba(51, 51, 51, 0));
}
.markdownx-edge-shadow-right {
  right: 0;
  background: linear-gradient(270deg, rgba(51, 51, 51, 0.16), rgba(51, 51, 51, 0));
}

/* 荧光标记 / 上下标 */
.md-mark {
  border-radius: 4rpx;
  background: #fffb8f;
  color: #1f1f1f;
}
.md-sup,
.md-sub {
  font-size: 75%;
  position: relative;
}
.md-sup { top: -0.5em; }
.md-sub { bottom: -0.25em; }

/* 仅含支付宝端专属样式（块入场/逐字动画、链接按压态）。通用元素样式由
   src/components/shared/elements.css 单一来源提供，构建时 copy-component-assets.mjs 会把它
   「内联拼接」到本文件输出的开头（不另外产出 elements.acss、不用 @import，与微信端保持一致）。
   表格 / 代码块样式在此处；LaTeX 样式必须由 MiniNodeRenderer 自身引入，因为公式节点
   实际渲染在递归的 MiniNodeRenderer 内部。 */

.md-animate-block {
  animation-fill-mode: forwards;
  animation-name: md-block-appear;
  animation-timing-function: ease-in;
  animation-duration: 300ms;
}

/* 纯透明度淡入：不做 translateY 位移，避免流式逐字重渲染时块体上下抖动。 */
@keyframes md-block-appear {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}

/* 流式逐字淡入：每个新字符从透明渐显，已显示的字符（按下标复用）不会重播。
   Alipay 不能嵌套 <text>，包裹层用 inline view 维持文本流。 */
text {
  line-height: inherit;
  vertical-align: baseline;
}

.md-list-item {
  display: flex;
  align-items: flex-start;
  margin: 4rpx 0;
}

.md-list-marker {
  flex: 0 0 28rpx;
  width: 28rpx;
  padding-top: 6rpx;
  margin-right: 8rpx;
  line-height: 1;
  text-align: center;
}
.md-list-content {
  display: block;
  flex: 1;
  min-width: 0;
}

/* Alipay real devices do not consistently honor CSS table display, intrinsic
   width keywords, or structural pseudo-classes inside custom components. The Alipay transformer
   writes deterministic row widths and cell-position classes; the component only
   consumes those concrete values. */
.md-table-scroll {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
/* 边缘阴影（.markdownx-table-content / .markdownx-edge-shadow*）现为公用样式，见
   src/components/shared/elements.css（构建时内联进本文件）。这里仅保留代码块滚动容器。 */
.markdownx-code-scroll {
  position: relative;
  overflow: hidden;
  border-radius: 0;
}
.markdownx-code-body {
  display: inline-block;
  min-width: 100%;
}
.md-table {
  display: block;
  width: 100%;
  min-width: 100%;
  overflow: visible;
  font-size: 26rpx;
  white-space: normal;
}
.md-tr {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-width: 100%;
}
.md-th, .md-td {
  display: block;
  flex: 0 0 240rpx;
  width: 240rpx;
  min-width: 240rpx;
  padding: 12rpx 20rpx;
  box-sizing: border-box;
  border-right: 2rpx solid #e5e5e5;
  border-bottom: 2rpx solid #e5e5e5;
  text-align: left;
  vertical-align: top;
  word-break: break-word;
  white-space: normal;
}
.md-table-multi .md-tc-f {
  flex-basis: 180rpx;
  width: 180rpx;
  min-width: 180rpx;
  max-width: 180rpx;
}
.md-table-multi .md-tc-r {
  flex-basis: 240rpx;
  width: 240rpx;
  min-width: 240rpx;
}
.md-table-single .md-th,
.md-table-single .md-td {
  flex: 1 0 100%;
  width: 100%;
  max-width: none;
}
.md-th {
  background: #fafafa;
  font-weight: 600;
}
.md-tr .md-th:last-child,
.md-tr .md-td:last-child {
  border-right: none;
}
.md-table .md-tr:last-child .md-td {
  border-bottom: none;
}

.md-anim-text {
  display: inline;
}
.md-anim-char {
  opacity: 0;
  animation: md-char-in 360ms ease-out forwards;
}
@keyframes md-char-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 链接按压态：Alipay 走 hover-class（微信端链接无此态） */
.md-link--active {
  color: #0958d9;
  opacity: 0.72;
}