/* 邀请与预览浮层（UX_DESIGN_2026_09_08 §3.2 + §14.2 + §15.3）：
   一个主动作 + 一行邀请码，状态就地反馈；没有展开层、没有功能清单。
   形态是居中对话框（带遮罩，落位由 floating-dialog.js 的 centered 给），不锚在入口上。 */
.preview-card {
    position: fixed;
    z-index: var(--dl-z-context-menu);
    box-sizing: border-box;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 20px;
    font-family: var(--dl-font);
    color: var(--dl-ink);
    background: var(--dl-surface);
    border-radius: var(--dl-r-pop);
    box-shadow: var(--dl-sh-menu);
    opacity: 0;
    pointer-events: none;
    /* 进场只有 120ms 淡入，没有位移（§1.4） */
    transition: opacity var(--dl-t-state) ease;
}
.preview-card * { box-sizing: border-box; }
.preview-card[hidden], .preview-card [hidden] { display: none !important; }
.preview-card.is-open { opacity: 1; pointer-events: auto; }
.preview-card__header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-right: 32px; }
.preview-card__title { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 600; }
/* 「已开启」= 三处轻标识之一（§3.4 ②）：只在已拿到优先预览时出现 */
.preview-card__badge {
    padding: 1px 6px; border-radius: 4px;
    background: var(--dl-ok-bg); color: var(--dl-ok-ink);
    font-size: var(--dl-fs-caption); line-height: var(--dl-lh-caption);
}
/* 视觉在右上角，DOM 在最后：位置归 CSS，Tab 序归 DOM */
.preview-card__close {
    position: absolute; top: 16px; right: 16px;
    width: var(--dl-ctl-sm); height: var(--dl-ctl-sm);
    border: 0; border-radius: var(--dl-r-item-lg); background: transparent;
    color: var(--dl-ink-3); cursor: pointer; font-size: 18px; line-height: 1;
}
.preview-card__body { margin: 0; color: var(--dl-ink-2); font-size: 13px; line-height: 1.7; }
.preview-card__retry {
    margin-top: 4px; padding: 0; border: 0; background: none;
    color: var(--dl-ink-2); font: inherit; font-size: 13px;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
/* 主动作（A3 条 2）：满宽黑钮，卡里唯一的第一优先级 */
.preview-card__primary { width: 100%; min-height: 40px; margin-top: 16px; }
/* 复制完的回执：常驻占位 16px，出现与消失都不推动下面的钮 */
.preview-card__echo {
    margin: 6px 0 0; min-height: 16px;
    color: var(--dl-ink-3); font-size: var(--dl-fs-caption); line-height: var(--dl-lh-caption);
}
.preview-card__echo[data-state="error"] { color: var(--dl-err-ink); }
/* 次动作（A3 条 3）：描边钮，与主钮同宽同高，差别只在有没有底色 */
.preview-card__secondary { width: 100%; min-height: 40px; margin-top: 8px; }
.preview-card__claim { margin-top: 10px; }
.preview-card__claim-row { display: flex; align-items: center; gap: 8px; }
.preview-card__input { flex: 1 1 auto; min-width: 0; }
/* 确认钮 40 高：与它同一行的输入框一样高，不做小一号 */
.preview-card__confirm { min-height: 40px; padding: 0 16px; flex: 0 0 auto; }
/* 我的邀请码（A3 条 4）：与首页 hero 那张卡同一套 —— 整卡可点，右侧小字兼作回执 */
.preview-card__mine {
    border-top: 1px solid var(--dl-line); padding-top: 14px; margin-top: 18px;
}
.preview-card__mine-label {
    display: block; margin-bottom: 6px;
    color: var(--dl-ink-3); font-size: var(--dl-fs-caption); line-height: var(--dl-lh-caption);
}
.preview-card__mine-card {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 40px; padding: 8px 12px;
    border: 1px solid var(--dl-line-pop); border-radius: var(--dl-r-item-lg);
    background-color: var(--dl-surface);
    background-image: linear-gradient(180deg, var(--dl-surface-2) 0%, transparent 100%);
    color: var(--dl-ink); font: inherit; text-align: left; cursor: pointer;
    transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.preview-card__mine-code { font-size: 14px; font-weight: 500; letter-spacing: .04em; overflow-wrap: anywhere; }
.preview-card__mine-hint {
    flex: 0 0 auto; min-width: 4em; text-align: right; white-space: nowrap;
    color: var(--dl-ink-3); font-size: var(--dl-fs-caption);
}
.preview-card__mine-card.is-copied .preview-card__mine-hint { color: var(--dl-ink); }
/* 输入框的聚焦由 .dl-field 给（A4 的墨边框 + 柔环）；这里只管按钮的键盘焦点环 */
.preview-card button:focus-visible { outline: none; box-shadow: var(--dl-focus-ring); }
.preview-card__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (hover: hover) {
    .preview-card__mine-card:hover { background-color: var(--dl-surface-2); border-color: color-mix(in srgb, var(--dl-ink) 18%, transparent); }
    .preview-card__close:hover { background: var(--dl-hover); color: var(--dl-ink); }
}
@media (max-width: 768px) {
    .preview-card :is(button,input) { min-height: 48px; }
    .preview-card__retry { min-height: 0; }
    .preview-card__mine-hint { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .preview-card, .preview-card * { transition: none; transform: none; }
}

/* ── 达成优先预览的那一次（§3.4 + §14.2 条 5 + §15.3）：居中对话框，带遮罩，一次撒花 ── */
.preview-unlocked {
    position: fixed;
    z-index: var(--dl-z-context-menu);
    box-sizing: border-box;
    width: min(360px, calc(100vw - 32px));
    padding: 20px;
    font-family: var(--dl-font);
    color: var(--dl-ink);
    background: var(--dl-surface);
    border-radius: var(--dl-r-pop);
    box-shadow: var(--dl-sh-menu);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dl-t-state) ease;
}
.preview-unlocked[hidden] { display: none !important; }
.preview-unlocked.is-open { opacity: 1; pointer-events: auto; }
.preview-unlocked__title { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 600; }
.preview-unlocked__body { margin: 8px 0 0; color: var(--dl-ink-2); font-size: 13px; line-height: 1.7; }
.preview-unlocked__actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.preview-unlocked__ok { min-height: 36px; padding: 0 20px; }
.preview-unlocked :is(button):focus-visible { outline: none; box-shadow: var(--dl-focus-ring); }
/* 纸片只罩浮层周围那一块，永远不接指针事件 */
.preview-unlocked__confetti {
    position: fixed;
    z-index: var(--dl-z-context-menu);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .preview-unlocked { transition: none; }
}