/**
 * @file link-preview.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The link preview: a card under a pasted link in a message, a clickable row
 *   (thumbnail · site · title · description) and a ✕ that hides it; the cards of one message stack
 *   in a column. Theme tokens only.
 *   Drawn by components/LinkPreview.js: <div class="link-preview-list"> holding
 *   <div class="link-preview"><a class="link-preview-main"><span class="link-preview-thumb"><img></span>
 *   <span class="link-preview-text"><span class="link-preview-site"> · -title · -desc</span></a>
 *   <button class="link-preview-hide">✕</button></div>.
 *   NOTE: this file must be linked in spa.html, where inbox.css was, so the thumbnail's image rule
 *   keeps its rank over the message's own image rule.
 * @version-history
 *   v1.0.0 — 2026-09-27 — Moved unchanged out of css/views/inbox.css under the component's own names:
 *     .inbox-linkcards → .link-preview-list, .inbox-linkcard → .link-preview, and its parts
 *     .inbox-linkcard-main/-thumb/-text/-site/-title/-desc → .link-preview-*, .inbox-linkcard-x →
 *     .link-preview-hide (a move: the same declarations, the same selector shapes).
 */

.link-preview-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.link-preview {
  position: relative; display: flex; align-items: stretch;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--card-bg-alt); overflow: hidden;
}
.link-preview-main {
  display: flex; align-items: stretch; gap: 10px; min-width: 0; flex: 1;
  padding: 8px 10px; text-decoration: none; color: inherit;
}
.link-preview-main:hover { background: var(--surface-hover); }
.link-preview-thumb { flex: none; width: 72px; display: flex; align-items: center; justify-content: center; }
.link-preview-thumb img {
  width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-xs); display: block; margin: 0;
}
.link-preview-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; justify-content: center; }
.link-preview-site { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .02em; }
.link-preview-title {
  font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.link-preview-desc {
  font-size: 12px; color: var(--text-dim); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.link-preview-hide {
  flex: none; align-self: flex-start; border: none; background: transparent; cursor: pointer;
  color: var(--text-dim); font-size: 12px; line-height: 1; padding: 6px 8px; border-radius: var(--radius-xs);
}
.link-preview-hide:hover { color: var(--text); background: var(--surface-hover); }