/* =====================================================================
   Feed-redesign overrides — pull Trash, Duplicates, and Analytics into
   the same row-shape language as Activity + Library.
   Loaded AFTER each page's own stylesheet so these rules win.
   ===================================================================== */

/* Shared tokens borrowed from activity-app.css for visual parity */
:root {
  --feed-row-pad-y: 14px;
  --feed-row-pad-x: 18px;
  --feed-row-gap:   14px;
  --feed-divider:   rgba(255,255,255,0.06);
  --feed-bucket-fg: rgba(255,255,255,0.42);
  --feed-eyebrow-fg: rgba(255,255,255,0.55);
  --feed-meta-fg:   rgba(255,255,255,0.5);
  --feed-title-fg:  rgba(255,255,255,0.94);
  --feed-strong-fg: #fff;
}
[data-theme="light"] {
  --feed-divider:   rgba(0,0,0,0.07);
  --feed-bucket-fg: rgba(0,0,0,0.45);
  --feed-eyebrow-fg: rgba(0,0,0,0.55);
  --feed-meta-fg:   rgba(0,0,0,0.5);
  --feed-title-fg:  rgba(0,0,0,0.92);
  --feed-strong-fg: rgba(0,0,0,1);
}

/* =====================================================================
   TRASH — kill the table, become a feed
   ===================================================================== */

/* Hero stays but tighten and add a digest line */
.trash-hero {
  padding: 28px 24px 20px !important;
  border-bottom: 1px solid var(--feed-divider) !important;
  background: transparent !important;
}
.trash-hero__icon { display: none !important; }
.trash-hero__title { font-size: 30px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; }
.trash-hero__count { color: var(--feed-meta-fg) !important; font-weight: 400 !important; margin-left: 8px !important; }
.trash-hero__sub { color: var(--feed-meta-fg) !important; max-width: 64ch; }

/* Toolbar: thinner, text-shaped chips like activity filter row */
.trash-toolbar {
  padding: 14px 24px !important;
  border-bottom: 1px solid var(--feed-divider) !important;
  background: transparent !important;
  gap: 12px !important;
}
.trash-chip {
  background: transparent !important;
  border: 1px solid var(--feed-divider) !important;
  color: var(--feed-meta-fg) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}
.trash-chip.is-on {
  background: rgba(255,255,255,0.06) !important;
  color: var(--feed-strong-fg) !important;
  border-color: rgba(255,255,255,0.16) !important;
}

/* Selection bar floats at bottom only when active */
.trash-selbar {
  position: fixed !important;
  left: 50% !important;
  bottom: 24px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  background: rgba(20,16,12,0.94) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55) !important;
  z-index: 80 !important;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(12px);
}
[data-theme="light"] .trash-selbar {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(0,0,0,0.1) !important;
}

/* TABLE → feed transformation. Use display:contents-style flatten + grid rows. */
.trash-table { display: block !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
.trash-thead { display: none !important; }            /* drop the column headers */

.trash-row {
  display: grid !important;
  grid-template-columns: 24px 36px 1fr auto !important;
  grid-template-areas:
    "check  avatar  body  actions"
    ".      .       meta  ."
    ;
  align-items: center;
  gap: 0 var(--feed-row-gap) !important;
  padding: var(--feed-row-pad-y) var(--feed-row-pad-x) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--feed-divider) !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  position: relative;
  transition: background 120ms ease;
}
.trash-row:hover { background: rgba(255,255,255,0.025) !important; }
[data-theme="light"] .trash-row:hover { background: rgba(0,0,0,0.025) !important; }
.trash-row.is-sel { background: rgba(255,255,255,0.05) !important; }

.trash-td { padding: 0 !important; border: 0 !important; min-width: 0; }
.trash-td--check    { grid-area: check; }
.trash-td--preview  { grid-area: avatar; width: 36px !important; }
.trash-td--item     { grid-area: body; min-width: 0; }
.trash-td--del,
.trash-td--reason   { display: none !important; }     /* fold into meta line */
.trash-td--actions  { grid-area: actions; display: flex; gap: 6px; opacity: 0; transition: opacity 120ms ease; }
.trash-row:hover .trash-td--actions,
.trash-row.is-sel .trash-td--actions { opacity: 1; }

/* Avatar slot: tiny waveform / glyph 36×36 */
.trash-prev,
.trash-folder {
  width: 36px !important; height: 36px !important;
  border-radius: 8px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--feed-divider) !important;
  overflow: hidden;
}
.trash-prev { position: relative !important; }
.trash-prev svg { width: 28px !important; height: 16px !important; }
.trash-prev__pbtn {
  position: absolute !important;
  inset: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  margin: auto !important;
  opacity: 0;
  pointer-events: none;
}
.trash-prev:hover .trash-prev__pbtn,
.trash-row.is-playing .trash-prev__pbtn { opacity: 1; }
.trash-prev:hover > svg,
.trash-row.is-playing .trash-prev > svg { opacity: 0.18; }
.trash-prev__pbtn svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  transform: none !important;
}
.trash-prev__pbtn--play svg {
  transform: translateX(1px) !important;
}
.trash-folder__txt { display: none !important; }
.trash-glyph { color: var(--feed-meta-fg) !important; }

/* Body: title line + tight meta line that absorbs origin/deleted/reason */
.trash-item__title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--feed-title-fg) !important;
  letter-spacing: 0 !important;
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.trash-item__title > span,
.trash-item__title > .trash-hot { flex: 0 0 auto; }
.trash-hot {
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  color: var(--accent, #FA3A05) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.trash-hot svg { width: 10px; height: 10px; }

.trash-item__sub {
  font-size: 12px !important;
  color: var(--feed-meta-fg) !important;
  margin-top: 2px !important;
  display: block;
}
.trash-item__origin { color: var(--feed-meta-fg) !important; }

/* Append "deleted Xd ago" + "reason" to the meta line via row::after.
   The original cells are hidden; we surface their text via a small
   trailing-meta block below the body using flex order. */
.trash-row::after {
  content: "";
  grid-area: meta;
  display: block;
  font-size: 11px;
  color: var(--feed-bucket-fg);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* Action buttons compact, icon-first */
.trash-btn--restore { padding: 6px 10px !important; font-size: 12px !important; }
.trash-btn--restore svg { width: 12px; height: 12px; }
.trash-row .trash-btn--danger.trash-btn--icon {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  line-height: 1 !important;
}
.trash-row .trash-btn--danger.trash-btn--icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Empty state — reuse activity styling */
.trash-empty { padding: 80px 24px !important; }
.trash-empty__h { font-weight: 600 !important; }


/* =====================================================================
   DUPLICATES — strip card chrome, become feed rows under reason eyebrows
   ===================================================================== */

.dup-page { padding: 0 !important; max-width: none !important; }

.dup-hero {
  padding: 28px 24px 20px !important;
  border-bottom: 1px solid var(--feed-divider) !important;
  background: transparent !important;
}
.dup-hero__icon { display: none !important; }
.dup-hero__title { font-size: 30px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; }
.dup-hero__count { color: var(--feed-meta-fg) !important; font-weight: 400 !important; margin-left: 8px !important; }
.dup-hero__sub { color: var(--feed-meta-fg) !important; max-width: 64ch !important; }
.dup-hero__never { color: var(--feed-eyebrow-fg) !important; font-style: italic; }

/* Stat scoreboard → small filter pills row, not big number tiles */
.dup-hero__scoreboard {
  margin-top: 14px !important;
  gap: 6px !important;
  display: flex !important;
  flex-wrap: wrap !important;
}
.dup-stat {
  display: inline-flex !important; align-items: center; gap: 6px;
  background: transparent !important;
  border: 1px solid var(--feed-divider) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  color: var(--feed-meta-fg) !important;
  font-size: 12px !important;
}
.dup-stat svg { width: 12px; height: 12px; }
.dup-stat__body { display: flex; gap: 4px; align-items: baseline; }
.dup-stat__num { font-size: 12px !important; font-weight: 600 !important; color: var(--feed-strong-fg) !important; }
.dup-stat__lbl { font-size: 12px !important; }
.dup-stat.is-on { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.16) !important; color: var(--feed-strong-fg) !important; }

/* Toolbar */
.dup-toolbar {
  padding: 14px 24px !important;
  border-bottom: 1px solid var(--feed-divider) !important;
  background: transparent !important;
  gap: 12px !important;
}
.dup-chip {
  background: transparent !important;
  border: 1px solid var(--feed-divider) !important;
  color: var(--feed-meta-fg) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.dup-chip.is-on { background: rgba(255,255,255,0.06) !important; color: var(--feed-strong-fg) !important; border-color: rgba(255,255,255,0.16) !important; }

/* Group: drop the card frame, header becomes a thin eyebrow */
.dup-groups { padding: 0 !important; }
.dup-group {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--feed-divider) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.dup-group__head {
  background: transparent !important;
  padding: 18px 24px 8px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  align-items: start !important;
  cursor: pointer;
}
.dup-group__chev { display: none !important; }
.dup-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--feed-eyebrow-fg) !important;
}
.dup-pill svg { width: 11px; height: 11px; }

.dup-group__title { grid-column: 1 / 2; min-width: 0; }
.dup-group__name {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--feed-strong-fg) !important;
  letter-spacing: -0.005em !important;
}
.dup-group__artist { color: var(--feed-meta-fg) !important; font-weight: 400 !important; }
.dup-group__sub { color: var(--feed-meta-fg) !important; font-size: 12px !important; }

/* Confidence: drop the bar, keep just the percent inline with the eyebrow */
.dup-group__conf { display: none !important; }

/* Header actions */
.dup-group__head-actions { grid-column: 2 / 3; grid-row: 1 / span 2; align-self: center; gap: 6px !important; }
.dup-btn--sm { padding: 6px 10px !important; font-size: 12px !important; }

/* Why text + export note: reduce visual weight */
.dup-group__why {
  padding: 0 24px 8px 24px !important;
  font-size: 12px !important;
  color: var(--feed-meta-fg) !important;
  margin: 0 !important;
}
.dup-export-note {
  margin: 4px 24px 12px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--feed-divider) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  color: var(--feed-meta-fg) !important;
}
.dup-export-note b { color: var(--feed-strong-fg); font-weight: 600; }

/* Files: each file is one feed row */
.dup-files { padding: 0 !important; gap: 0 !important; display: block !important; }
.dup-file {
  display: grid !important;
  grid-template-columns: 16px 36px 1fr auto auto !important;
  grid-template-areas: "dot avatar body meta actions" !important;
  align-items: center !important;
  gap: 0 var(--feed-row-gap) !important;
  padding: var(--feed-row-pad-y) var(--feed-row-pad-x) var(--feed-row-pad-y) 24px !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--feed-divider) !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.dup-file:hover { background: rgba(255,255,255,0.025) !important; }
[data-theme="light"] .dup-file:hover { background: rgba(0,0,0,0.025) !important; }

/* Keeper indicator becomes the leading dot (like activity's pulse) */
.dup-file__radio {
  grid-area: dot !important;
  width: 12px !important; height: 12px !important;
  border: 1.5px solid rgba(255,255,255,0.28) !important;
  border-radius: 999px !important;
  background: transparent !important;
  padding: 0 !important;
  position: static !important;
}
.dup-file__radio-dot { display: none !important; }
.dup-file.is-keeper .dup-file__radio {
  background: var(--accent, #FA3A05) !important;
  border-color: var(--accent, #FA3A05) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #FA3A05) 25%, transparent);
}

/* Avatar slot uses the existing mini-wave */
.dup-file__wave {
  grid-area: avatar !important;
  width: 36px !important; height: 36px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--feed-divider) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  overflow: hidden;
}
.dup-file__wave svg { width: 28px !important; height: 18px !important; }

.dup-file__play { display: none !important; }      /* play-on-hover lives in avatar */
.dup-file__wave:hover { cursor: pointer; }

/* Body */
.dup-file__title-col { grid-area: body !important; min-width: 0 !important; }
.dup-file__title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--feed-title-fg) !important;
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.dup-file.is-keeper .dup-file__title { font-weight: 600 !important; color: var(--feed-strong-fg) !important; }
.dup-file__keeper-tag {
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
  color: var(--accent, #FA3A05) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.dup-file__sub {
  font-size: 12px !important;
  color: var(--feed-meta-fg) !important;
  margin-top: 2px !important;
}

/* Trailing meta: just size, plays. Drop separate added/origin/hash columns */
.dup-file__meta-col { grid-area: meta !important; }
.dup-file__meta-col + .dup-file__meta-col,
.dup-file__meta-col--added { display: none !important; }
.dup-file__meta-col--size { display: block !important; text-align: right !important; }
.dup-file__meta-num { font-size: 12px !important; font-weight: 500 !important; color: var(--feed-meta-fg) !important; }
.dup-file__meta-lbl { display: none !important; }

/* Hide chrome that became redundant */
.dup-file__origin,
.dup-file__hash,
.dup-file__device { display: none !important; }

/* Group footer hint: tighten */
.dup-group__foot { padding: 4px 24px 18px !important; }
.dup-group__hint {
  font-size: 11px !important;
  color: var(--feed-bucket-fg) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.dup-group__hint svg { width: 11px; height: 11px; }


/* =====================================================================
   ANALYTICS — collapse the side rail; convert tiles to feed sections
   ===================================================================== */

/* Find the side filter rail and force it inline above main content.
   Selectors are defensive — analytics.css uses .an- prefix. */
.an-shell, .an-layout, .analytics-shell {
  display: block !important;
  grid-template-columns: none !important;
}
.an-side, .an-sidebar, .analytics-rail, .an-filter-rail {
  position: static !important;
  width: 100% !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--feed-divider) !important;
  padding: 12px 24px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  background: transparent !important;
}
.an-side > *, .an-sidebar > * { flex: 0 0 auto; }

/* KPI tiles → single oversized digest line (let two stand out, demote rest) */
.an-kpis, .an-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 14px !important;
  padding: 24px !important;
  border-bottom: 1px solid var(--feed-divider) !important;
}
.an-kpi { background: transparent !important; border: 0 !important; padding: 0 !important; }
.an-kpi__num,
.an-kpi-num {
  font-size: 36px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--feed-strong-fg) !important;
}
.an-kpi__lbl,
.an-kpi-lbl {
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--feed-eyebrow-fg) !important;
}

/* Section headers borrow activity's eyebrow */
.an-section, .an-card {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--feed-divider) !important;
  border-radius: 0 !important;
  padding: 24px !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.an-section__title, .an-card__title {
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--feed-eyebrow-fg) !important;
}
.an-section__sub, .an-card__sub { color: var(--feed-meta-fg) !important; font-size: 13px !important; }

/* Recipient/track tables → activity leader-row look */
.an-table tr td { border-bottom: 1px solid var(--feed-divider) !important; padding: 10px 8px !important; }
.an-table tr:hover td { background: rgba(255,255,255,0.025) !important; }
[data-theme="light"] .an-table tr:hover td { background: rgba(0,0,0,0.025) !important; }

/* Benchmarks / risk: dim if present */
.an-benchmarks, .an-bench { opacity: 0.85; }

/* Make sure the page itself is one scroll surface */
.an-page, .analytics-page { overflow: visible !important; }

/* Playlists: relaxed density CSS that was missing */
.pl-row.is-relaxed { padding-top: 18px !important; padding-bottom: 18px !important; }
.pl-row.is-relaxed .pl-row__main { gap: 18px !important; }
.pl-row.is-compact { padding-top: 8px !important; padding-bottom: 8px !important; }
.pl-row.is-compact .pl-row__sub { display: none !important; }

/* Analytics: keep the secondary filter rail clear of the main sidebar.
   .ai-side is position-static within .ai-page (a grid), so the only
   issue is when the page width forces the grid to collapse. Pin a min
   width on the main column so content never gets squeezed off-screen. */
.ai-page {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  align-items: stretch !important;
}
.ai-main { min-width: 0 !important; }
.ai-side {
  position: relative !important;
  width: auto !important;
  max-width: 220px !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  padding: 16px 14px !important;
}
@media (max-width: 1100px) {
  .ai-page { grid-template-columns: 1fr !important; }
  .ai-side { display: none !important; }
}

/* Player bar belongs at the bottom of the viewport, not in the page flow */
.main > .session-player-bar,
.main > .player-bar,
.main > [class*="PlayerBar"] {
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
}