/* Talk / Spaces directory enhancements (decorated by yal-talk-list.js).
   The Spaces search list ships from the compiled bundle as <article class="x-post">
   rows inside the "Search Spaces" section. We don't touch the bundle: yal-talk-list.js
   tags each live-Space row with .yal-space-card and marks the busiest one
   .yal-space-trending, and we style them here.

   Goals from the request:
   - space names in purple
   - the trending (most-listened) Space floats to the top
   - rows look live/dynamic and are fully clickable to join */

/* The list container is switched to a flex column so we can float the trending
   Space up via CSS `order` (set inline by the JS) without reordering DOM nodes
   — that keeps React happy and avoids flicker. The heading/search form keep the
   default order:0 so they always stay above the cards. */
.yal-space-list-scope {
  display: flex;
  flex-direction: column;
}

/* Purple Space name. */
.yal-space-card .x-post-header strong {
  color: #a855f7;
  font-weight: 800;
}

/* Live pulse dot before the name for a dynamic, "this is live" feel. */
.yal-space-card .x-post-header strong::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #a855f7;
  vertical-align: middle;
  animation: yalSpacePulse 1.6s ease-out infinite;
}

@keyframes yalSpacePulse {
  0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(168, 85, 247, 0); }
  100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
}

/* Whole row is clickable -> joins. Hover lifts + tints purple. */
.yal-space-card {
  cursor: pointer;
  border-radius: 14px;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.yal-space-card:hover {
  background: rgba(168, 85, 247, 0.07);
  border-color: rgba(168, 85, 247, 0.6);
  transform: translateY(-1px);
}

/* The buttons inside stay interactive and shouldn't inherit the row cursor. */
.yal-space-card button {
  cursor: pointer;
}

/* Trending (most listeners) Space: highlighted card + a badge after the name. */
.yal-space-card.yal-space-trending {
  border: 1px solid rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25), 0 4px 18px rgba(120, 86, 255, 0.18);
  background: linear-gradient(180deg, rgba(120, 86, 255, 0.10), rgba(168, 85, 247, 0.03));
}

.yal-space-card.yal-space-trending .x-post-header strong::after {
  content: "🔥 Trending";
  margin-left: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #7856ff, #a855f7);
  padding: 2px 9px;
  border-radius: 999px;
  vertical-align: middle;
  letter-spacing: 0.01em;
}