/* --------------------------------------------------------------------------
   6.5 Poster - 分享海报
   -------------------------------------------------------------------------- */

/* ==================== 海报对话框 ====================
   原生 <dialog> + showModal()：顶层显示，不受主题吸顶导航的层级影响；Esc 与焦点由 poster.js 配合处理。
   纯色遮罩，不用毛玻璃；手机端为底部弹出，与购买、打赏弹窗一致。 */
dialog.uap-poster-modal {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: calc(100% - 48px);
    max-width: 420px;
    height: fit-content;
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--uap-radius-lg);
    background: var(--uap-surface);
    box-shadow: var(--uap-shadow-xl);
    color: var(--uap-text);
    font-family: var(--uap-font-family);
    font-size: var(--uap-text-base);
    line-height: 1.5;
    animation: uap-poster-dialog-in var(--uap-duration) var(--uap-ease-out);
}

dialog.uap-poster-modal[hidden],
dialog.uap-poster-modal:not([open]) {
    display: none;
}

dialog.uap-poster-modal::backdrop {
    background: rgba(28, 25, 23, 0.56);
}

dialog.uap-poster-modal:focus {
    outline: none;
}

@keyframes uap-poster-dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

.uap-poster-modal .uap-poster-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 10px 20px;
    border: 0;
}

.uap-poster-modal .uap-poster-modal-title {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--uap-text);
    font-family: inherit;
    font-size: var(--uap-text-md);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
}

.uap-poster-modal .uap-poster-modal-close {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--uap-text-light);
    cursor: pointer;
    transition: background-color var(--uap-duration-fast) ease, color var(--uap-duration-fast) ease;
}

.uap-poster-modal svg {
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.uap-poster-modal .uap-poster-modal-close svg {
    width: 20px;
    height: 20px;
}

@media (hover: hover) {
    .uap-poster-modal .uap-poster-modal-close:hover {
        background: var(--uap-surface-hover);
        color: var(--uap-text);
    }
}

.uap-poster-modal .uap-poster-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 20px;
    overscroll-behavior: contain;
}

/* 海报放在浅底“舞台”上，图片本身带细边和轻投影，像一张放在桌上的卡片 */
.uap-poster-modal .uap-poster-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 20px;
    border-radius: var(--uap-radius-md);
    background: var(--uap-bg);
}

.uap-poster-modal .uap-poster-preview {
    display: flex;
    justify-content: center;
    width: 100%;
}

.uap-poster-modal .uap-poster-preview:empty {
    display: none;
}

.uap-poster-modal .uap-poster-preview img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100dvh - 260px);
    margin: 0;
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(28, 25, 23, 0.06), 0 8px 24px -8px rgba(28, 25, 23, 0.18);
    -webkit-touch-callout: default;
    animation: uap-poster-reveal var(--uap-duration) var(--uap-ease-out);
}

@keyframes uap-poster-reveal {
    from {
        opacity: 0;
    }
}

/* 生成中：海报比例的骨架，而不是转圈 */
.uap-poster-modal .uap-poster-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: var(--uap-text-light);
    font-size: var(--uap-text-sm);
}

.uap-poster-modal .uap-poster-loading[hidden] {
    display: none;
}

.uap-poster-skeleton {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 188px;
    padding: 14px 12px;
    border-radius: 6px;
    background: var(--uap-surface);
    box-shadow: 0 0 0 1px rgba(28, 25, 23, 0.06);
    animation: uap-poster-pulse 1.4s ease-in-out infinite;
}

.uap-poster-skeleton span {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--uap-border-light);
}

.uap-poster-skeleton .is-cover {
    height: 104px;
    margin: 2px -12px 4px;
    border-radius: 0;
}

.uap-poster-skeleton .is-title {
    width: 86%;
    height: 12px;
}

.uap-poster-skeleton .is-short {
    width: 58%;
}

.uap-poster-skeleton .is-foot {
    align-self: flex-end;
    width: 40px;
    height: 40px;
    margin-top: 10px;
}

@keyframes uap-poster-pulse {
    50% {
        opacity: 0.55;
    }
}

.uap-poster-modal .uap-poster-error {
    max-width: 260px;
    margin: 0;
    color: var(--uap-text-muted);
    font-size: var(--uap-text-sm);
    line-height: 1.6;
    text-align: center;
}

.uap-poster-modal .uap-poster-tip {
    margin: 12px 0 0;
    color: var(--uap-text-light);
    font-size: var(--uap-text-xs);
    line-height: 1.5;
    text-align: center;
}

.uap-poster-modal .uap-poster-tip[hidden] {
    display: none;
}

/* 无法调起系统分享时提醒长按图片 */
.uap-poster-modal .uap-poster-tip.is-flash {
    color: var(--uap-text);
    font-weight: 600;
    animation: uap-poster-tip-flash 1.2s var(--uap-ease-out);
}

@keyframes uap-poster-tip-flash {
    0%,
    40% {
        color: var(--uap-action-bg);
    }
}

.uap-poster-modal .uap-poster-modal-footer {
    display: flex;
    gap: 10px;
    padding: 16px 20px 20px;
    border: 0;
}

.uap-poster-modal .uap-poster-modal-footer button {
    box-sizing: border-box;
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    height: 44px;
    min-height: 0;
    margin: 0;
    padding: 0 16px;
    border-radius: var(--uap-radius-sm);
    box-shadow: none;
    font: inherit;
    font-size: var(--uap-text-base);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--uap-duration-fast) ease, border-color var(--uap-duration-fast) ease, color var(--uap-duration-fast) ease;
}

.uap-poster-modal .uap-poster-modal-footer svg {
    width: 18px;
    height: 18px;
}

.uap-poster-modal .uap-poster-copy-btn {
    border: 1px solid var(--uap-border);
    background: var(--uap-surface);
    color: var(--uap-text);
}

.uap-poster-modal .uap-poster-download-btn {
    border: 1px solid transparent;
    background: var(--uap-action-bg);
    color: #ffffff;
}

@media (hover: hover) {
    .uap-poster-modal .uap-poster-copy-btn:hover {
        border-color: var(--uap-border-hover);
        background: var(--uap-surface);
        color: var(--uap-text);
    }

    .uap-poster-modal .uap-poster-download-btn:hover:not(:disabled) {
        background: var(--uap-action-hover);
        color: #ffffff;
    }
}

.uap-poster-modal .uap-poster-download-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 复制链接：复制后按钮就地变成“已复制”（原生对话框会盖住页面提示条） */
.uap-poster-modal .uap-poster-copy-btn .is-done,
.uap-poster-modal .uap-poster-copy-btn.is-copied .is-link {
    display: none;
}

.uap-poster-modal .uap-poster-copy-btn.is-copied .is-done {
    display: block;
}

.uap-poster-modal .uap-poster-copy-btn.is-copied {
    color: var(--uap-action-bg);
}

/* 主按钮：电脑“下载图片”；触屏“保存图片”（调起系统分享面板） */
.uap-poster-modal .uap-poster-download-btn .is-share,
.uap-poster-modal.is-touch .uap-poster-download-btn .is-download {
    display: none;
}

.uap-poster-modal.is-touch .uap-poster-download-btn .is-share {
    display: block;
}

@media (max-width: 640px) {
    dialog.uap-poster-modal {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 24px);
        margin: auto 0 0;
        border-radius: var(--uap-radius-lg) var(--uap-radius-lg) 0 0;
        animation-name: uap-poster-sheet-in;
    }

    .uap-poster-modal .uap-poster-modal-body {
        padding: 0 16px;
    }

    .uap-poster-modal .uap-poster-stage {
        padding: 16px;
    }

    .uap-poster-modal .uap-poster-preview img {
        max-height: calc(100dvh - 240px);
    }

    .uap-poster-modal .uap-poster-modal-footer {
        padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
    }
}

@keyframes uap-poster-sheet-in {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    dialog.uap-poster-modal,
    .uap-poster-modal .uap-poster-preview img,
    .uap-poster-skeleton {
        animation: none;
    }
}

/* ==================== 海报画布（html2canvas 截图，固定 375px） ====================
   截图库会在 375px 宽的克隆页里重新计算样式，所以这里不能写任何按视口生效的规则；
   它也不支持 color-mix()、filter、object-fit：颜色用实色，封面用背景图裁切。 */
/* 随页面输出、供翻译的海报文字（class-poster.php render_text_sources），始终隐藏 */
.uap-poster-text-source {
    display: none !important;
}

.uap-poster-canvas-wrap {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.uap-poster-canvas {
    --uap-pc-ink: #1c1917;
    --uap-pc-text: #44403b;
    --uap-pc-muted: #78716a;
    --uap-pc-line: #ebe7e0;
    --uap-pc-paper: #ffffff;
    --uap-pc-band: var(--uap-action-bg, #0e7a6d);
    --uap-pc-eyebrow: var(--uap-action-bg, #0e7a6d);
    --uap-pc-quote: #b3872c;
    box-sizing: border-box;
    width: 375px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-top: 4px solid var(--uap-pc-band);
    background: var(--uap-pc-paper);
    color: var(--uap-pc-ink);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

.uap-poster-canvas *,
.uap-poster-canvas *::before,
.uap-poster-canvas *::after {
    box-sizing: border-box;
}

.uap-poster-canvas [hidden] {
    display: none !important;
}

.uap-poster-canvas .uap-poster-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 60px;
    padding: 0 24px;
}

.uap-poster-canvas .uap-poster-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* 没有 Logo 时用站名首字做印章 */
.uap-poster-canvas .uap-poster-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--uap-pc-band);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.uap-poster-canvas .uap-poster-mark:empty {
    display: none;
}

.uap-poster-canvas .uap-poster-logo {
    display: none;
    width: auto;
    max-width: 150px;
    height: 26px;
    margin: 0;
}

.uap-poster-canvas .uap-poster-brand.has-logo .uap-poster-logo {
    display: block;
}

/* 方形 Logo 与站名并排；横版 Logo（宽高比大于 2.2）本身就是字标，不再重复站名 */
.uap-poster-canvas .uap-poster-brand.has-logo .uap-poster-mark,
.uap-poster-canvas .uap-poster-brand.is-wide .uap-poster-site-name {
    display: none;
}

.uap-poster-canvas .uap-poster-site-name {
    overflow: hidden;
    color: var(--uap-pc-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uap-poster-canvas .uap-poster-date {
    flex-shrink: 0;
    color: var(--uap-pc-muted);
    font-size: 12px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.uap-poster-canvas .uap-poster-cover {
    width: 375px;
    height: 211px;
    background-color: var(--uap-pc-line);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.uap-poster-canvas .uap-poster-body {
    padding: 22px 24px 0;
}

.uap-poster-canvas .uap-poster-eyebrow {
    display: block;
    margin: 0 0 8px;
    color: var(--uap-pc-eyebrow);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.06em;
}

.uap-poster-canvas .uap-poster-eyebrow:empty,
.uap-poster-canvas .uap-poster-excerpt:empty {
    display: none;
}

.uap-poster-canvas .uap-poster-title {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--uap-pc-ink);
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.01em;
    text-transform: none;
    text-wrap: balance;
    word-break: break-word;
}

.uap-poster-canvas .uap-poster-excerpt {
    margin: 10px 0 0;
    padding: 0;
    color: var(--uap-pc-text);
    font-size: 14px;
    line-height: 1.75;
    word-break: break-word;
}

.uap-poster-canvas .uap-poster-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--uap-pc-text);
    font-size: 13px;
    line-height: 1;
}

.uap-poster-canvas .uap-poster-avatar {
    width: 24px;
    height: 24px;
    margin: 0;
    border-radius: 50%;
}

/* 底部只有一条分隔线 */
.uap-poster-canvas .uap-poster-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 22px 24px 0;
    padding: 18px 0 24px;
    border-top: 1px solid var(--uap-pc-line);
}

.uap-poster-canvas .uap-poster-footer-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.uap-poster-canvas .uap-poster-scan-text {
    color: var(--uap-pc-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.uap-poster-canvas .uap-poster-footer-site {
    overflow: hidden;
    color: var(--uap-pc-muted);
    font-size: 12px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 二维码按 2 倍尺寸生成后缩小显示，截图边缘清晰；截图前移除 canvas，只留 img */
.uap-poster-canvas .uap-poster-qrcode {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    padding: 4px;
    border-radius: 6px;
    background: #ffffff;
}

.uap-poster-canvas .uap-poster-qrcode canvas {
    display: none !important;
}

.uap-poster-canvas .uap-poster-qrcode img {
    display: block !important;
    width: 68px !important;
    height: 68px !important;
    margin: 0;
}

/* 没有封面：文字海报，标题放大，摘要作引文 */
.uap-poster-canvas.is-text-only .uap-poster-cover {
    display: none;
}

.uap-poster-canvas.is-text-only .uap-poster-body {
    padding-top: 28px;
}

.uap-poster-canvas.is-text-only .uap-poster-title {
    font-size: 26px;
    line-height: 1.4;
}

.uap-poster-canvas.is-text-only .uap-poster-excerpt {
    margin-top: 16px;
    padding-left: 12px;
    border-left: 3px solid var(--uap-pc-quote);
}

/* 墨色（存储值 dark）：暖墨底，落款金细节 */
.uap-poster-canvas[data-template="dark"] {
    --uap-pc-ink: #f5f1ea;
    --uap-pc-text: #cfc8bc;
    --uap-pc-muted: #9a9387;
    --uap-pc-line: #3a3530;
    --uap-pc-paper: #1c1917;
    --uap-pc-band: #c99a3f;
    --uap-pc-eyebrow: #d9b56a;
    --uap-pc-quote: #c99a3f;
}

.uap-poster-canvas[data-template="dark"] .uap-poster-mark {
    color: #1c1917;
}

/* 深色底上 Logo 垫白底（截图库不支持 filter 反色） */
.uap-poster-canvas[data-template="dark"] .uap-poster-brand.has-logo .uap-poster-logo,
.uap-poster-canvas[data-template="brand"] .uap-poster-brand.has-logo .uap-poster-logo {
    box-sizing: content-box;
    padding: 4px 8px;
    border-radius: 6px;
    background: #ffffff;
}

/* 品牌色（存储值 gradient）：品牌行在主色页眉上，封面压在页眉边缘；没有封面时标题和摘要也在主色上 */
.uap-poster-canvas[data-template="brand"] {
    border-top: 0;
}

.uap-poster-canvas[data-template="brand"] .uap-poster-panel {
    padding-bottom: 60px;
    background: var(--uap-action-bg, #0e7a6d);
}

.uap-poster-canvas[data-template="brand"] .uap-poster-panel .uap-poster-site-name {
    color: #ffffff;
}

.uap-poster-canvas[data-template="brand"] .uap-poster-panel .uap-poster-date {
    color: rgba(255, 255, 255, 0.78);
}

.uap-poster-canvas[data-template="brand"] .uap-poster-mark {
    background: #ffffff;
    color: var(--uap-action-bg, #0e7a6d);
}

.uap-poster-canvas[data-template="brand"] .uap-poster-cover {
    width: 327px;
    height: 184px;
    margin: -44px 24px 0;
    border-radius: 8px;
}

.uap-poster-canvas[data-template="brand"].is-text-only .uap-poster-panel {
    padding-bottom: 0;
}

.uap-poster-canvas[data-template="brand"].is-text-only .uap-poster-body {
    padding-top: 12px;
    padding-bottom: 30px;
    background: var(--uap-action-bg, #0e7a6d);
}

.uap-poster-canvas[data-template="brand"].is-text-only .uap-poster-title {
    color: #ffffff;
}

.uap-poster-canvas[data-template="brand"].is-text-only .uap-poster-eyebrow,
.uap-poster-canvas[data-template="brand"].is-text-only .uap-poster-excerpt,
.uap-poster-canvas[data-template="brand"].is-text-only .uap-poster-author {
    color: rgba(255, 255, 255, 0.86);
}

.uap-poster-canvas[data-template="brand"].is-text-only .uap-poster-excerpt {
    border-left-color: rgba(255, 255, 255, 0.5);
}

.uap-poster-canvas[data-template="brand"].is-text-only .uap-poster-footer {
    margin-top: 0;
    border-top: 0;
}