/*
 * CT-380 PANELPRO -- CapCut-class transition panel skin.
 *
 * Loaded AFTER ui/spectrum-editor.css, which is legacy and frozen and carries
 * !important on many of these selectors, so the rules here must match that
 * weight to win. Scoped to the transitions pane only.
 *
 * Design rules taken from the reference screenshots:
 *   - one fixed tile size, it never scales with the panel
 *   - between 2 and 5 tiles per row, never more than 5
 *   - name sits BELOW the tile, one line, centred
 *   - no tag chip, no permanent star: the tile stays clean
 *   - star and the apply badge appear on hover only
 *   - only the hovered tile animates
 *
 * Kill: html.ct380-off (set by fps-toggles / window.__ZED_CT380_PANEL_PRO=false)
 */

:root {
  --zedTileW: 92px;
  --zedTileH: 96px;
  --zedTileGap: 10px;
  --zedTileCols: 4;
  --zedTileRadius: 9px;
}

/* ------------------------------------------------------------------ grid */

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] #transitionPresetGrid.transitionPresetGrid {
  display: grid !important;
  grid-template-columns: repeat(var(--zedTileCols), var(--zedTileW)) !important;
  grid-auto-rows: max-content !important;
  gap: 14px var(--zedTileGap) !important;
  justify-content: center !important;
  align-content: start !important;
  padding: 12px 10px 18px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] #transitionPresetGrid::-webkit-scrollbar {
  width: 8px;
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] #transitionPresetGrid::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 999px;
}

/* ------------------------------------------------------------------ tile */

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: var(--zedTileW) !important;
  min-width: 0 !important;
  max-width: var(--zedTileW) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  /* keeps long lists cheap to scroll: off-screen tiles skip layout and paint */
  content-visibility: auto;
  contain-intrinsic-size: var(--zedTileW) calc(var(--zedTileH) + 22px);
}

/* the thumbnail shell */
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset > i {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: var(--zedTileH) !important;
  border-radius: var(--zedTileRadius) !important;
  overflow: hidden !important;
  background: #14161c !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 1px 3px rgba(2, 6, 23, 0.4) !important;
  transition: border-color 0.12s ease, transform 0.12s ease;
  will-change: auto !important;
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset > i > canvas,
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset .transitionPreviewCanvas,
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset .transitionPreviewFallback {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset:hover > i {
  border-color: rgba(148, 163, 184, 0.55) !important;
  transform: translateY(-1px);
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset.is-active > i {
  border-color: rgba(var(--accent-rgb, 88 166 255), 0.95) !important;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 88 166 255), 0.35),
    0 2px 10px rgba(var(--accent-rgb, 88 166 255), 0.22) !important;
}

/* ------------------------------------------------------------------ name */

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset .zlibMeta {
  display: block !important;
  width: 100% !important;
  padding: 0 1px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset .zlibName {
  display: block !important;
  max-width: 100% !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  color: #c3ccd7 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset:hover .zlibName,
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset.is-active .zlibName {
  color: #f0f6fc !important;
}

/* the tag chip is clutter at this size */
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset .zlibTag {
  display: none !important;
}

/* --------------------------------------------------------- hover controls */

/* star: hidden until hover, unless it is already a favorite */
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset .transitionPresetFavorite {
  position: absolute !important;
  top: 4px !important;
  left: 5px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 6 !important;
  width: 18px !important;
  height: 18px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(8, 10, 14, 0.55) !important;
  border: 0 !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  transition: opacity 0.12s ease, color 0.12s ease;
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset:hover .transitionPresetFavorite,
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset:focus-within .transitionPresetFavorite,
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset.is-favorite .transitionPresetFavorite {
  opacity: 1 !important;
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset .transitionPresetFavorite.is-active {
  color: #ffd166 !important;
}

/* apply badge, bottom right, hover only -- pure CSS, no markup change */
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset > i::after {
  content: "+";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #0b0e13;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(2, 6, 23, 0.5);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPreset:hover > i::after {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------ filter pills */

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] #transitionPillBar.transitionPillBar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 10px 9px !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] #transitionPillBar::-webkit-scrollbar {
  display: none;
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPill {
  flex: 0 0 auto !important;
  padding: 5px 11px !important;
  margin: 0 !important;
  font-size: 11.5px !important;
  font-weight: 550 !important;
  line-height: 1.2 !important;
  color: #9aa4b1 !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPill:hover {
  color: #e6edf3 !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPill.is-active {
  color: #0b0e13 !important;
  background: #e8eef6 !important;
  border-color: transparent !important;
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"] .transitionPill-favorites.is-active {
  background: #ffd166 !important;
}

/* ------------------------------------------------------------- resize feel */

/* while the panel is being dragged, kill every transition in the pane so the
   drag is pure layout and cannot feel rubbery */
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-transition-panel-resizing * {
  transition: none !important;
  animation: none !important;
}


/* =====================================================================
 * CT-381 TILEPURE
 *
 * Beats ui/spectrum-editor.css L25284+ (.transitionPreset.zlib-card, !important)
 * by including the #transitionPresetGrid ID in every selector.
 *
 * What the legacy block was forcing, and what we now force instead:
 *   padding 8px + background + border + shadow  ->  nothing, bare picture
 *   aspect-ratio 16 / 9 (wide)                  ->  3 / 4 (tall, CapCut shape)
 *   title INSIDE the card box                   ->  title below, on the panel bg
 *   name left + tag chip right                  ->  name only, one line
 * ===================================================================== */

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset,
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset.zlib-card,
html:not(.ct380-off) .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset,
html:not(.ct380-off) .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset.zlib-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  width: var(--zedTileW) !important;
  max-width: var(--zedTileW) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  align-self: start !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  contain: layout style !important;
  contain-intrinsic-size: auto !important;
}

/* hover and selection must not bring the box back */
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset.zlib-card:hover,
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset.zlib-card.is-active,
html:not(.ct380-off) .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset.zlib-card:hover,
html:not(.ct380-off) .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset.zlib-card.is-active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* the picture: portrait, tall up and down, nothing around it */
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset > i,
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset.zlib-card > i,
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset.zlib-card > .transitionPreviewFallback,
html:not(.ct380-off) .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset > i,
html:not(.ct380-off) .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset.zlib-card > i,
html:not(.ct380-off) .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset.zlib-card > .transitionPreviewFallback {
  position: relative !important;
  flex: 0 0 auto !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #14161c !important;
  box-shadow: none !important;
  transition: box-shadow 0.12s ease !important;
}

/* hover and selection read on the picture edge only, no card chrome */
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset:hover > i,
html:not(.ct380-off) .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset:hover > i {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5) !important;
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset.is-active > i,
html:not(.ct380-off) .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset.is-active > i {
  box-shadow: inset 0 0 0 2px rgba(45, 212, 191, 0.95) !important;
}

/* title: below the picture, on the panel background, one line */
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset .zlibMeta,
html:not(.ct380-off) .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset .zlibMeta {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 1px !important;
  margin: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset .zlibName,
html:not(.ct380-off) .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset .zlibName {
  display: block !important;
  width: 100% !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: #b9c2cd !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: transparent !important;
}

html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset:hover .zlibName,
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset.is-active .zlibName,
html:not(.ct380-off) .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset:hover .zlibName,
html:not(.ct380-off) .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset.is-active .zlibName {
  color: #f0f6fc !important;
}

/* tag chip and any decorative marks on the title row are gone */
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset .zlibTag,
html:not(.ct380-off) .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset .zlibTag,
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset .zlibMeta::before,
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset .zlibName::before,
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset::before,
html:not(.ct380-off) .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset::before {
  display: none !important;
  content: none !important;
}

/* the picture fills its frame at the new ratio */
html:not(.ct380-off) .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset .transitionPreviewCanvas,
html:not(.ct380-off) .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset .transitionPreviewCanvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  background: transparent !important;
}


/* =====================================================================
 * CT-383 CANVASWINDOW
 *
 * ui/spectrum-editor.css L23636 sets will-change: transform on every card
 * canvas, and L23640 adds translateZ(0) on top. That instructs the browser to
 * keep a separate permanent compositing layer for each one. With 214 cards that
 * is 214 layers held alive even while nothing paints, which is why an open panel
 * cost 40ms a frame while a closed panel cost nothing.
 *
 * Nothing here needs its own layer. The card that animates is the one under the
 * cursor, and one element getting a layer on hover is free.
 * ===================================================================== */

html:not(.ct380-off) #transitionPresetGrid.transitionPresetGrid .transitionPreset .transitionPreviewCanvas,
html:not(.ct380-off) #transitionPresetGrid.transitionPresetGrid .transitionPreset:not(:hover):not(.is-active) .transitionPreviewCanvas[data-transition-still-painted="true"] {
  will-change: auto !important;
  transform: none !important;
}

/* the hovered card may have a layer, it is the only one that moves */
html:not(.ct380-off) #transitionPresetGrid.transitionPresetGrid .transitionPreset:hover .transitionPreviewCanvas {
  will-change: transform !important;
}


/* ===================== CT-384 CARDWINDOW ===================== */
#transitionPresetGrid .ct384Spacer {
  pointer-events: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}