/**
 * AI 摘要 & SEO —— 详情页摘要块样式
 *
 * 配色不写死颜色值，直接用主题的 text-muted / border 等语义类，
 * 跟着主题换肤走；这里只补结构与动画。
 */

/* ---------------- 摘要块 ---------------- */

.sub-ai-summary {
    position: relative;
    margin: 0 0 1.25rem;
    padding: .9rem 1rem 1rem;
    border: 1px dashed rgba(152, 162, 179, .55);
    border-radius: .5rem;
    background: rgba(152, 162, 179, .06);
    font-size: .925rem;
    line-height: 1.85;
}

.sub-ai-summary-head {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .5rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #98a2b3;
}

.sub-ai-summary-head .iconfont {
    font-size: .9rem;
}

.sub-ai-summary-body {
    color: inherit;
    word-break: break-word;
}

/* 淡入：没有 JS 也照常显示，动画只是锦上添花 */
.sub-ai-summary-anim {
    animation: subAiSummaryIn .45s ease-out both;
}

@keyframes subAiSummaryIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------------- 打字机 ---------------- */

/* 允许软换行与断词，逐字塞入时不会把中英文挤成一行 */
.sub-ai-typed {
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
}

/* 光标跟随在已打出的文字后面，打完即移除 */
.sub-ai-cursor {
    display: inline-block;
    width: .5em;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -.15em;
    border-radius: 1px;
    background: currentColor;
    opacity: .7;
    animation: subAiBlink 1s steps(1, end) infinite;
}

@keyframes subAiBlink {
    0%,
    100% {
        opacity: .7;
    }
    50% {
        opacity: 0;
    }
}

/* 打字过程中收起「展开更多」：正文还没出完，按钮指向的内容不成立 */
.sub-ai-typing .sub-ai-summary-more {
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .sub-ai-summary-anim {
        animation: none;
    }

    .sub-ai-cursor {
        animation: none;
    }
}

/* ---------------- 折叠态 ---------------- */

/* 用 max-height 而非 JS 算高度：内容长短都能收得住，且不会因字体加载抖动 */
.sub-ai-summary-fold:not(.sub-ai-summary-open) .sub-ai-summary-body {
    max-height: 5.6em; /* 约 3 行 */
    overflow: hidden;
    /* 顶部裁切遮罩，暗示下方还有内容 */
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.sub-ai-summary-more {
    display: inline-block;
    margin-top: .5rem;
    padding: .15rem .7rem;
    border: 1px solid rgba(152, 162, 179, .5);
    border-radius: 999px;
    background: transparent;
    color: #667085;
    font-size: .78rem;
    line-height: 1.7;
    cursor: pointer;
    transition: color .2s, border-color .2s, background-color .2s;
}

.sub-ai-summary-more:hover,
.sub-ai-summary-more:focus {
    border-color: rgba(102, 112, 133, .85);
    background: rgba(102, 112, 133, .08);
    color: #344054;
    outline: none;
}

/* 展开后按钮移到块尾右下角，视觉上更像「收起」 */
.sub-ai-summary-open .sub-ai-summary-more {
    display: block;
    margin-left: auto;
    margin-top: .6rem;
}

/* ---------------- 窄屏 ---------------- */

@media (max-width: 576px) {
    .sub-ai-summary {
        padding: .75rem .85rem .85rem;
        font-size: .875rem;
    }

    .sub-ai-summary-fold:not(.sub-ai-summary-open) .sub-ai-summary-body {
        max-height: 4.8em;
    }
}