/* ─────────────────────────────────────────────────────────────
   post-preview.css — Telegram post card (креатив-превью)
   Вынесен из components/post-preview.html (2026-08-10) для
   потребителей: B5 builder, B7 request, B9/C5 detail, C4, D3.
   Все цвета — через токены tokens.css (обе темы).
   ───────────────────────────────────────────────────────────── */
.post-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);overflow:hidden;max-width:560px}
.post-header{display:flex;align-items:center;gap:12px;padding:14px 16px}
.post-avatar{width:40px;height:40px;border-radius:50%;background:var(--color-page);display:flex;align-items:center;justify-content:center;font:600 14px/20px var(--font-num);color:var(--color-primary);flex-shrink:0}
.post-author{display:flex;flex-direction:column;min-width:0;flex:1}
.post-name{font:600 14px/20px var(--font-ui);color:var(--color-ink);letter-spacing:-.01em;display:flex;align-items:center;gap:4px}
.post-name i{color:var(--color-primary);font-size:14px;line-height:1}
.post-handle{font:400 12px/16px var(--font-ui);color:var(--color-ink-3);display:flex;align-items:center;gap:6px;margin-top:1px}
.post-handle .sep{opacity:.5}
.post-handle time{font:400 12px/16px var(--font-num);font-feature-settings:"tnum";color:var(--color-ink-3)}
.post-body{padding:0 16px 14px;font:400 14px/22px var(--font-ui);color:var(--color-ink)}
.post-body p{margin:0 0 8px}
.post-body p:last-child{margin:0}
.post-body strong{font-weight:600}
.post-body em{font-style:italic}
.post-body code{font:400 13px/20px var(--font-num);background:var(--color-page);color:var(--color-ink);padding:1px 5px;border-radius:4px}
.post-link{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px}
.post-spoiler{background:var(--color-spoiler-bg);color:transparent;border:0;border-radius:6px;padding:0 4px;-webkit-box-decoration-break:clone;cursor:pointer;transition:background .15s,color .15s;font-weight:inherit}
.post-spoiler:hover{background:var(--color-spoiler-bg-hover)}
.post-spoiler.open{background:transparent;color:inherit;font-weight:400}
.post-media{aspect-ratio:16/9;background:var(--color-page);border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);display:flex;align-items:center;justify-content:center;color:var(--color-ink-3);position:relative;overflow:hidden}
.post-media i{font-size:32px}
.post-media--photo{background:var(--color-amber-bg)}
.post-media--video{background:var(--color-video-bg-1);color:var(--color-video-fg)}
.post-media--doc{aspect-ratio:auto;background:var(--color-divider);border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:12px 14px;gap:12px;display:flex;align-items:center;text-align:left;margin:0 16px}
.post-media--doc .doc-icon{font-size:28px;color:var(--color-ink-3);flex-shrink:0}
.post-media--doc .doc-name{font:600 13px/18px var(--font-num);color:var(--color-ink)}
.post-media--doc .doc-size{font:400 12px/16px var(--font-num);font-feature-settings:"tnum";color:var(--color-ink-3);margin-top:2px}
.post-caption{padding:10px 16px 0;font:400 13px/20px var(--font-ui);color:var(--color-ink-2)}
.post-caption strong{color:var(--color-ink);font-weight:600}
.post-no-preview{display:inline-flex;align-items:center;gap:6px;margin:6px 16px 0;font:400 12px/16px var(--font-ui);color:var(--color-ink-3)}
.post-no-preview i{font-size:16px}
.post-actions{display:flex;align-items:center;gap:16px;padding:12px 16px;border-top:1px solid var(--color-divider);font:500 12px/16px var(--font-num);font-feature-settings:"tnum";color:var(--color-ink-3)}
.post-actions .act{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.post-actions .sep{opacity:.4;margin:0 -8px;color:var(--color-ink-3)}
.post-actions i{font-size:16px;line-height:1}
.post-buttons{padding:8px;border-top:1px solid var(--color-divider);display:flex;flex-direction:column;gap:8px}
.post-btn-row{display:grid;gap:8px}
.post-btn-row[data-cols="1"]{grid-template-columns:1fr}
.post-btn-row[data-cols="2"]{grid-template-columns:1fr 1fr}
.post-btn-row[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
.post-btn{min-height:44px;padding:10px 14px;border-radius:var(--radius-md);border:1px solid var(--color-divider);background:var(--color-surface);color:var(--color-ink);font:500 14px/20px var(--font-ui);letter-spacing:-.01em;text-align:center;cursor:pointer;transition:all .15s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px}
.post-btn:hover{background:var(--color-page);border-color:var(--color-ink-3)}
.post-btn i{font-size:16px}