/* ==========================================================================
   YouTube — a link that shows what it is
   ========================================================================== */
.yt-card {
  display: flex; gap: 12px; align-items: center; max-width: 420px;
  border: 1px solid var(--border); border-radius: 12px; padding: 8px;
  background: var(--bg); margin: 6px 0; text-decoration: none;
}
.yt-thumb {
  position: relative; flex: none; width: 132px; aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden; background: var(--bg-hover); cursor: pointer;
  display: block;
}
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  transition: transform .12s;
}
.yt-thumb:hover .yt-play { transform: scale(1.08); }
.yt-play svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); width: 38px; height: 27px; }
.yt-meta { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.yt-title {
  font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yt-actions { display: flex; align-items: center; gap: 12px; font-size: 12.5px; }
.yt-go {
  border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--accent); cursor: pointer; font-weight: 600;
}
.yt-go:hover { text-decoration: underline; text-underline-offset: 2px; }
.yt-out { color: var(--text-faint); text-decoration: none; }
.yt-out:hover { text-decoration: underline; text-underline-offset: 2px; }
.yt-frame {
  display: block; width: min(420px, 100%); aspect-ratio: 16 / 9; border: 0;
  border-radius: 12px; margin: 6px 0; background: #000;
}
/* In a chat bubble there is no room beside the thumbnail — the card stacks,
   with the picture full width and the title under it. Side by side, the two
   links wrapped one character per line. */
.chat-bub .yt-card {
  max-width: 100%; padding: 6px; gap: 8px; flex-direction: column; align-items: stretch;
}
.chat-bub .yt-thumb { width: 100%; }
.chat-bub .yt-meta { padding: 0 2px 2px; }
.chat-bub .yt-title { font-size: 12.5px; }
.chat-bub .yt-actions { font-size: 12px; gap: 10px; }
.chat-bub .yt-frame { width: 100%; }

/* the same, wherever the card lands in something narrow */
@media (max-width: 560px) {
  .yt-card { flex-direction: column; align-items: stretch; }
  .yt-thumb { width: 100%; }
}