/* Link preview cards (link-preview.js). */
.lp-card { display: flex; flex-direction: column; overflow: hidden; width: 100%; max-width: 380px; margin-top: 8px; color: inherit; text-decoration: none; background: rgba(8, 13, 28, 0.72); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid #22c55e; border-radius: 10px; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.lp-card:hover { border-color: rgba(34, 197, 94, 0.55); border-left-color: #22c55e; transform: translateY(-1px); box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.8); }
.lp-card:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
.lp-pic { position: relative; overflow: hidden; aspect-ratio: 1200 / 630; background: #0b1328; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.lp-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-live { position: absolute; top: 0; left: 0; width: 1200px; height: 630px; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
.lp-tx { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px 10px; min-width: 0; }
.lp-host { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; color: #8f97a8; font-size: 0.74rem; }
.lp-hn { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lp-card.is-compact .lp-host { flex-wrap: nowrap; }
.lp-host svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lp-badge { flex: none; padding: 1px 7px; color: #22c55e; font-size: 0.68rem; font-style: normal; font-weight: 600; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.32); border-radius: 999px; }
.lp-title { display: -webkit-box; overflow: hidden; color: #e8ecf5; font-size: 0.9rem; font-weight: 600; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lp-desc { display: -webkit-box; overflow: hidden; color: #a9b1c2; font-size: 0.8rem; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lp-slot { position: relative; margin-top: 8px; }
.lp-slot > .lp-card { margin-top: 0; }
.lp-loading { padding: 10px 12px; color: #8f97a8; font-size: 0.8rem; background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(255, 255, 255, 0.12); border-radius: 10px; }
/* In the Connect message box: one compact row above the box, with a Remove button. */
.lp-slot.is-compose { margin: 0 0 8px; }
.lp-card.is-compact { flex-direction: row; align-items: stretch; max-width: 100%; }
.lp-card.is-compact .lp-pic { flex: none; width: 128px; aspect-ratio: auto; min-height: 68px; border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, 0.07); }
.lp-card.is-compact .lp-tx { justify-content: center; padding-right: 44px; }
.lp-card.is-compact .lp-title { -webkit-line-clamp: 1; }
.lp-x { position: absolute; top: 50%; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: #cdd2da; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; transform: translateY(-50%); cursor: pointer; }
.lp-x:hover { color: #fff; border-color: rgba(34, 197, 94, 0.5); }
.lp-x:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
.lp-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cn-bubble .lp-card { max-width: 340px; }
[data-theme="light"] .lp-card { background: #fff; border-color: rgba(15, 23, 42, 0.12); border-left-color: #22c55e; }
[data-theme="light"] .lp-title { color: #0f172a; }
[data-theme="light"] .lp-desc { color: #475569; }
[data-theme="light"] .lp-host, [data-theme="light"] .lp-loading { color: #64748b; }
@media (max-width: 480px) { .lp-card.is-compact .lp-pic { width: 96px; } }
@media (prefers-reduced-motion: reduce) { .lp-card { transition: none; } .lp-card:hover { transform: none; } }
/* YouTube videos play inside the card (link-preview.js) */
.lp-video { cursor: pointer; }
.lp-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 58px; height: 40px; color: #fff; background: rgba(239, 68, 68, 0.95); border-radius: 12px !important; transform: translate(-50%, -50%); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.8); transition: transform 0.15s, background 0.15s; }
.lp-play svg { width: 22px; height: 22px; margin-left: 2px; }
.lp-video:hover .lp-play { transform: translate(-50%, -50%) scale(1.08); background: #ef4444; }
.lp-video:focus-visible { outline: 2px solid #7cc4ff; outline-offset: 2px; }
.lp-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lp-video.is-playing { cursor: default; }
.lp-video.is-short.is-playing { aspect-ratio: 9 / 16; max-height: 70vh; }
.lp-badge.lp-yt { color: #fca5a5; background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); }