/* CBT Aggregator — grid hover preview overlay */

.cbt-thumbnail {
  position: relative;
  overflow: hidden;
}

/* The live frame sits on top of the static thumbnail, which keeps the
   card's layout height so nothing shifts while previewing. */
.cbt-thumbnail .cbt-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
  background: #000;
}

/* .is-live is added by the JS once the first frame actually decodes,
   so a model with no preview never flashes a broken image. */
.cbt-thumbnail .cbt-preview-img.is-live {
  opacity: 1;
}

/* Badges must stay above the preview */
.cbt-thumbnail .cbt-online,
.cbt-thumbnail .cbt-viewers,
.cbt-thumbnail .cbt-offline,
.cbt-thumbnail .cbt-offline-badge,
.cbt-thumbnail .cbt-lastseen,
.cbt-thumbnail .cbt-fav-btn {
  z-index: 3;
}

/* Subtle cue that the card is showing a live feed */
.cbt-thumbnail.cbt-previewing {
  box-shadow: inset 0 0 0 2px #e74c3c;
}

/* Never run on touch — the JS bails too, this is belt and braces */
@media (hover: none), (pointer: coarse) {
  .cbt-thumbnail .cbt-preview-img {
    display: none;
  }
}