/* QuickPick hex-menu demo — optional window-thumbnail add-on styles.
   Mirrors ThumbnailView.xaml in QuickPick's own style: dark charcoal card
   with app icon + window title, a subtle teal top accent, lightening to
   #333 on hover (ThumbBackground SemiGray on MouseEnter) and revealing a
   close button. Only needed by demos that use QpThumbnail from
   qp-thumbnail.js. */

.qp-thumb {
  position: absolute;
  width: 128px;
  background: #202024;                 /* ~#E6202020, QuickPick card */
  border: 1px solid #3a3a40;
  border-radius: 0;                    /* ThumbnailView uses square corners */
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  transition: opacity .22s ease-out, background .15s, border-color .15s;
}
.qp-thumb.shown { opacity: 1; }
.qp-thumb.hover {
  background: #333333;                 /* SemiGray on MouseEnter */
  border-color: #0F7D80;               /* QuickPick teal accent */
}

.qp-thumb-title {
  display: flex; align-items: center; gap: 6px;
  height: 22px;
  padding: 0 4px 0 8px;
}
.qp-thumb-icon { display: flex; }
.qp-thumb-icon svg { width: 12px; height: 12px; display: block; }
.qp-thumb-text {
  flex: 1;
  color: #F7F7F7;                      /* ForegroundBrush */
  font-size: 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qp-thumb-close {
  flex: none;
  color: #cfcfcf;
  font-size: 9px;
  width: 16px; height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 4px;
  opacity: 0;                          /* btnClose is Collapsed until hover */
  transition: opacity .15s, background .15s;
}
.qp-thumb.hover .qp-thumb-close { opacity: 1; }
.qp-thumb-close:hover { background: #c42b1c; color: #fff; } /* Win11 close red */

/* Live window preview area; demos put their (scaled) placeholder shot here */
.qp-thumb-shot {
  position: relative;
  width: 116px; height: 74px;
  margin: 0 6px 6px;
  border-radius: 0;
  overflow: hidden;
  background: #101013;
}