@layer components {
  /* Link cards under a message: the shared page's picture, domain, title and text, opened in another tab. */
  .message-link-previews-frame { display: block; }
  .link-previews { display: flex; flex-direction: column; max-width: 460px; }
  .link-card {
    position: relative; margin-top: 7px; border: 1px solid var(--border); border-radius: 9px; background: var(--card);
  }
  /* The link clips the picture to the card's corners; the controls sit outside it, so its menu is never cut. */
  .link-card-link { display: block; overflow: hidden; border-radius: 8px; color: var(--foreground); text-decoration: none; }
  .link-card-link:hover .link-card-title { text-decoration: underline; }
  .link-card-link:active { opacity: 0.85; }
  .link-card-link:focus-visible { outline-offset: -2px; }
  /* Sites draw their Open Graph picture at 1200 x 630: shown whole at that ratio, not cut to a strip. */
  .link-card-art { display: block; aspect-ratio: 1200 / 630; border-bottom: 1px solid var(--border); background: var(--muted); }
  .link-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .link-card--no-image .link-card-art { display: none; }
  .link-card-info { display: flex; flex-direction: column; gap: 4px; padding: 9px 11px; min-width: 0; }
  .link-card-domain { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 13px; color: var(--muted-foreground); }
  .link-card-domain > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .link-card-title, .link-card-description { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .link-card-title { font-size: 14px; font-weight: 600; line-height: 1.35; -webkit-line-clamp: 2; }
  .link-card-description { font-size: 13px; line-height: 1.5; color: var(--muted-foreground); -webkit-line-clamp: 3; }
  .link-card-controls { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; }
  .link-card:focus-within .link-card-controls, .link-card-controls:has(.link-card-menu[open]) { opacity: 1; }
  /* A real hover only: a tap hovers too, and iOS Safari then drops its click. */
  @media (hover: hover) { .link-card:hover .link-card-controls { opacity: 1; } }
  .link-card-control {
    position: relative; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--foreground);
    box-shadow: var(--shadow-sm); cursor: pointer; list-style: none;
  }
  .link-card-control::-webkit-details-marker { display: none; }
  .link-card-control:hover { background: var(--muted); }
  .link-card-control:active { background: var(--accent); }
  .link-card-menu { position: relative; display: flex; }
  .link-card-menu-list {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 200px; padding: 4px;
    display: flex; flex-direction: column; font-size: 13px; border: 1px solid var(--border);
    border-radius: var(--radius-md); background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-sm);
  }
  .link-card-menu-item { display: flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 6px; color: inherit; text-decoration: none; white-space: nowrap; }
  .link-card-menu-item:is(:hover, :active) { background: var(--accent); color: var(--accent-foreground); }
  .link-card-note {
    margin: 0; padding: 7px 11px; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px;
    background: var(--surface); color: var(--muted-foreground); font-size: 13px;
  }
  /* An entry that failed: one quiet line, for administrators only, their way to ask again. */
  .link-retry {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 7px 0 0; min-width: 0;
    font-size: 13px; color: var(--muted-foreground);
  }
  .link-retry > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .link-retry-action { color: var(--foreground); text-decoration: underline; }
  .link-retry-action:active { opacity: 0.7; }
  /* Who sees what: the author removes, an administrator refreshes, retries and reads the failure; nobody offline or
     read-only. */
  .message:not(.is-own) .link-card-remove,
  .conversation:not([data-can-edit="true"]) .link-card-remove,
  html:not([data-viewer-admin]) .link-card-menu,
  html:not([data-viewer-admin]) .link-card-note,
  html:not([data-viewer-admin]) .link-retry,
  html[data-read-only] .link-card-controls,
  html[data-read-only] .link-retry,
  html[data-offline-copy] .link-card-controls,
  html[data-offline-copy] .link-retry,
  html[data-offline-copy] .link-card-art { display: none; }
  @media (hover: none), (pointer: coarse) { .link-card-controls { opacity: 1; } }
  @media (pointer: coarse) {
    .link-card-menu-item { min-height: var(--tap); }
    .link-retry-action { display: inline-flex; align-items: center; min-height: var(--tap); }
  }
  @media (max-width: 767px) { .link-previews { max-width: none; } }
}