/* Grid container for previews */
.link-preview-grid {
  display: grid;
  grid-template-columns: 1fr; /* mobile default */
  gap: 20px;
}
@media (min-width: 576px) {
  .link-preview-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .link-preview-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Link Preview (WhatsApp-like) - theme-aligned */
.link-preview-wrapper {
  text-decoration: none;
}
.link-preview-card {
  border: 1px solid #e5e5e5;
  border-radius: .5rem;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
  width: 100%;
  height: 360px; /* mobile base */
}
@media (min-width: 576px) {
  .link-preview-card { height: 380px; }
}
@media (min-width: 992px) {
  .link-preview-card { height: 400px; }
}
.link-preview-card.is-loading,
.is-loading .link-preview-card { cursor: progress; }
.is-loading .link-preview-img { display: none !important; }
.is-loading .link-preview-fallback { display: none !important; }
.is-loading .link-preview-body { position: relative; }
.is-loading .link-preview-title,
.is-loading .link-preview-desc,
.is-loading .link-preview-domain { color: transparent; user-select: none; }
.is-loading .link-preview-body:after{
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 37%, rgba(0,0,0,0.04) 63%);
  animation: lp-shimmer 1.4s infinite;
}
@keyframes lp-shimmer {
  0% { background-position: -468px 0 }
  100% { background-position: 468px 0 }
}
.link-preview-wrapper:hover .link-preview-card {
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.link-preview-media {
  background: #f2f2f2;
  width: 100%;
  height: 160px; /* mobile */
}
@media (min-width: 576px) {
  .link-preview-media { height: 170px; }
}
@media (min-width: 992px) {
  .link-preview-media { height: 180px; }
}
.link-preview-card .card-body { display: flex; flex-direction: column; }
.link-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none; /* toggled by JS */
}
.link-preview-fallback {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: #ddd;
  display: none; /* toggled by JS */
  position: absolute;
  top: calc(90px - 32px);
  left: calc(50% - 32px);
}
.link-preview-body { flex: 1 1 auto; }
.link-preview-title {
  font-weight: 600;
  color: #111;
  line-height: 1.25;
  font-size: 1rem;
}
.link-preview-desc {
  font-size: 0.95rem;
  line-height: 1.35;
  max-height: 3.8em; /* ~3 lines */
  overflow: hidden;
}
.link-preview-domain {
  font-size: 0.85rem;
  color: #6c757d;
}
.link-preview-favicon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  margin-right: 6px;
  display: none; /* toggled by JS */
}

/* Dark-ish footer/background compatibility */
body.dark .link-preview-card {
  background: #1b1b1b;
  border-color: #2a2a2a;
}
body.dark .link-preview-title { color: #f8f9fa; }
body.dark .link-preview-domain,
body.dark .link-preview-desc { color: #adb5bd; }