/* Visual values intentionally match extension/src/content.js ensureHoverUI.
   Only positioning changes from viewport-fixed to the local demonstration. */
.tg-demo-button {
  position: absolute; top: 6px; right: 6px; z-index: 5; cursor: pointer;
  background: rgba(10,108,255,.92); color: #fff;
  font: 600 12px -apple-system,"PingFang SC",sans-serif;
  padding: 5px 10px; border-radius: 8px 8px 0 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  user-select: none; line-height: 1.2; border: 0;
}
.tg-demo-button:hover { background: rgba(10,108,255,1); }
.tg-demo-menu {
  /* Actual positionButton uses a 6px inset. positionMenu overlaps by 2px. */
  position: absolute; z-index: 6; top: 28.4px; right: 6px; box-sizing: content-box;
  min-width: 210px; max-height: 260px; overflow: auto;
  background: rgba(22,24,28,.97); color: #eee;
  font: 12px -apple-system,"PingFang SC",sans-serif;
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.45); padding: 6px;
}
.tg-demo-menu .tg-title { padding: 6px 8px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.tg-demo-menu .tg-item { width: 100%; padding: 7px 8px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left; line-height: normal; }
.tg-demo-menu .tg-item:hover,.tg-demo-menu .tg-item.is-selected { background: rgba(10,108,255,.85); color: #fff; }
.tg-demo-menu .tg-item .tg-size { color: #9aa3ad; }
.tg-demo-menu .tg-item:hover .tg-size,.tg-demo-menu .tg-item.is-selected .tg-size { color: #dbe8ff; }
.tg-demo-button:focus-visible,.tg-demo-menu .tg-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; background: #0a6cff; }