/*
 * 前台 · 正文排版（Markdown 渲染结果）
 * ---------------------------------------------------------------------------
 * 只服务前台的 .ui-prose，变量全部取 --ui-*，与后台共用的 shared/markdown.css
 * 各管一摊 —— 两端的字号、行宽和配色本来就不该一样。
 *
 * 结构约定：模型把 Markdown 渲染成 HTML 后放进 <div class="ui-prose">，
 * 这里只管「排版」，不关心内容是怎么来的。
 */

.ui-prose {
    color: var(--ui-text);
    font-size: var(--ui-text-md);
    line-height: 1.85;
    word-wrap: break-word;
}

.ui-prose > :first-child {
    margin-top: 0;
}

.ui-prose > :last-child {
    margin-bottom: 0;
}

/* ---------------- 标题 ---------------- */

.ui-prose h1,
.ui-prose h2,
.ui-prose h3,
.ui-prose h4,
.ui-prose h5,
.ui-prose h6 {
    margin: 1.75em 0 0.65em;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.ui-prose h1 {
    padding-bottom: 0.35em;
    border-bottom: 1px solid var(--ui-border);
    font-size: 1.5em;
}

.ui-prose h2 {
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--ui-border);
    font-size: 1.3em;
}

.ui-prose h3 {
    font-size: 1.12em;
}

.ui-prose h4,
.ui-prose h5,
.ui-prose h6 {
    font-size: 1em;
}

/* ---------------- 段落与链接 ---------------- */

.ui-prose p {
    margin: 0 0 1.1em;
}

.ui-prose a {
    color: var(--ui-brand);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--ui-brand) 35%, transparent);
    text-underline-offset: 3px;
}

.ui-prose a:hover {
    text-decoration-color: var(--ui-brand);
}

.ui-prose strong {
    font-weight: 600;
}

/* ---------------- 列表 ---------------- */

.ui-prose ul,
.ui-prose ol {
    margin: 0 0 1.1em;
    padding-left: 1.5em;
    list-style: revert;
}

.ui-prose li {
    margin-bottom: 0.35em;
}

.ui-prose li > ul,
.ui-prose li > ol {
    margin: 0.35em 0 0.35em;
}

/* ---------------- 引用 ---------------- */

.ui-prose blockquote {
    margin: 1.35em 0;
    padding: 0.6em 1.1em;
    border-left: 3px solid var(--ui-brand);
    border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0;
    background: var(--ui-surface-subtle);
    color: var(--ui-text-soft);
}

.ui-prose blockquote p {
    margin: 0;
    color: inherit;
}

.ui-prose blockquote > :last-child {
    margin-bottom: 0;
}

/* ---------------- 代码 ---------------- */

.ui-prose code {
    padding: 2px 6px;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface-subtle);
    color: var(--ui-danger);
    font-family: var(--ui-font-mono);
    font-size: 0.88em;
    word-break: break-word;
}

.ui-prose pre {
    position: relative; /* 复制按钮的定位基准 */
    margin: 1.35em 0;
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-muted);
    overflow-x: auto;
}

.ui-prose pre code {
    padding: 0;
    background: none;
    color: var(--ui-text);
    font-size: 0.88em;
    line-height: 1.7;
    word-break: normal;
}

/* ---------------- 表格 ---------------- */

.ui-prose table {
    display: block;
    width: 100%;
    margin: 1.35em 0;
    border-collapse: collapse;
    overflow-x: auto;
    font-size: 0.92em;
}

.ui-prose th,
.ui-prose td {
    padding: 8px 12px;
    border: 1px solid var(--ui-border);
    text-align: left;
}

.ui-prose th {
    background: var(--ui-surface-muted);
    font-weight: 600;
    white-space: nowrap;
}

/* ---------------- 媒体与分隔线 ---------------- */

.ui-prose img {
    margin: 1.35em 0;
    border-radius: var(--ui-radius-md);
}

.ui-prose figure {
    margin: 1.35em 0;
}

.ui-prose figcaption {
    margin-top: 6px;
    color: var(--ui-text-muted);
    font-size: var(--ui-text-xs);
    text-align: center;
}

.ui-prose hr {
    margin: 2em 0;
}

.ui-prose kbd {
    padding: 1px 5px;
    border: 1px solid var(--ui-border-strong);
    border-bottom-width: 2px;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface-subtle);
    font-size: 0.85em;
}

@media (max-width: 640px) {
    .ui-prose {
        font-size: var(--ui-text-base);
    }

    .ui-prose pre {
        padding: var(--ui-space-3);
    }
}