/* Top thumbnail bar, older-items tray, hover preview and drag chip. */

.topbar {
  position: fixed;
  top: var(--edge);
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translate(-50%, -6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s var(--ease);
}
.topbar.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }

.thumbbar,
.share-shell {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--thumb-gap);
  padding: calc(var(--thumb-gap) * .625);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-float);
  user-select: none;
}
.thumb-row { display: flex; gap: var(--thumb-gap); }

.thumb {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--thumb-size);
  height: var(--thumb-size);
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--thumb-radius);
  background: var(--surface) center / cover no-repeat;
  box-shadow: 0 2px 6px #0003;
  color: var(--muted);
  font: 700 10px var(--font);
  letter-spacing: .06em;
  cursor: pointer;
  transition: opacity .15s ease, transform .12s ease, border-color .15s, box-shadow .15s;
}
.thumb:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 4px 10px #0006; }
.thumb svg { width: 22px; height: 22px; }

/* Dim everything except what's near the pointer / on stage / selected */
.thumb-row .thumb:not(.import) { opacity: .45; }
.thumb-row .thumb.lit,
.thumb-row .thumb.current,
.thumb-row .thumb.selected { opacity: 1; }

.thumb.current { border-color: color-mix(in srgb, var(--accent) 70%, var(--border)); }
.thumb.current::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
}
.thumb.pinned::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}
.thumb.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow), 0 4px 12px #0008; }

.badge {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 8px #0008, 0 0 0 2px var(--surface);
  color: #fff;
  font: 800 11px var(--font);
}

.thumb.swapped { animation: swap-pulse .7s ease; }
@keyframes swap-pulse {
  0% { box-shadow: 0 0 0 0 var(--accent); }
  60% { box-shadow: 0 0 0 8px transparent; }
}

.thumb.import { border-style: dashed; color: var(--accent); background: transparent; }
.thumb.import.first-use { border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); }

/* ---------- Older-items tray ---------- */
.tray-toggle {
  display: grid;
  place-items: center;
  width: calc(var(--thumb-size) * .45);
  height: var(--thumb-size);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, transform .2s var(--ease);
}
.tray-toggle:hover { color: var(--ink); border-color: var(--border); }
.tray-toggle.active { color: var(--accent); }
.tray-toggle.active svg { transform: rotate(-90deg); }
.tray-toggle svg { transition: transform .2s var(--ease); }

.tray {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--thumb-gap);
  max-height: 60vh;
  overflow-y: auto;
  padding: calc(var(--thumb-gap) * 1.25);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-pop);
  animation: tray-in .18s var(--ease);
}
@keyframes tray-in { from { opacity: 0; transform: translateY(-6px) scaleY(.96); } }
.tray .thumb:hover { transform: scale(1.05); border-color: var(--accent); }
.thumb.trash { color: var(--muted); background: transparent; }
.thumb.trash:hover { border-color: var(--danger); color: #fff; background: color-mix(in srgb, var(--danger) 35%, transparent); }

/* ---------- Screen share ---------- */
.share-btn {
  color: var(--accent);
  border-color: var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
}
.share-btn .icon-stop { display: none; }
.share-btn.active { color: #fff; border-color: var(--danger); background: color-mix(in srgb, var(--danger) 45%, transparent); }
.share-btn.active .icon-start { display: none; }
.share-btn.active .icon-stop { display: block; }
.share-btn span { display: grid; }

/* ---------- Hover preview ---------- */
.thumb-preview {
  position: fixed;
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.thumb-preview.visible { opacity: 1; pointer-events: auto; }
.preview-content {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  overflow: hidden;
  border: 2px solid var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 95%, transparent) center / contain no-repeat;
  box-shadow: var(--shadow-pop), 0 0 0 6px var(--glow);
  color: var(--muted);
  font: 700 18px var(--font);
  cursor: grab;
  touch-action: none;
  transition: transform .15s ease;
}
.preview-content:hover { transform: scale(1.04); }
.preview-content video { width: 100%; height: 100%; object-fit: contain; }
.preview-content .badge { top: 6px; right: 6px; }

/* ---------- Drag chip ---------- */
.drag-chip {
  position: fixed;
  z-index: 200;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border: 2px solid var(--accent);
  border-radius: 12px;
  background: var(--surface) center / cover no-repeat;
  box-shadow: 0 12px 30px #000d, 0 0 0 6px var(--glow);
  color: var(--muted);
  font: 700 24px var(--font);
  opacity: .92;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-2deg);
}
body.dragging-card, body.dragging-card * { user-select: none !important; cursor: grabbing !important; }
body.dragging-card .topbar,
body.dragging-card .thumb-preview { opacity: 0 !important; pointer-events: none !important; }