/* Shared styles for the boost mega-thread renderer (boosts-thread.js).
   Used by /boosts.html (full thread), /ep### (per-episode subset), and
   /meetups (the .embed-note.is-event calendar card).
   Relies on the host page defining the LB color variables on :root —
   --cream, --cream-d, --navy, --navy-l, --orange, --orange-d, --text,
   --muted, --border, --white. */

/* ── Note cards ──────────────────────────────────────────────────── */
.note-list { list-style: none; margin: 0; padding: 0; }
.note-list li { margin: 0; }

.note-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 0.9rem;
  box-shadow: 0 2px 8px rgba(30,58,95,0.06);
}
.note-card.is-root {
  background: var(--white);
  border-left: 4px solid var(--orange);
  padding: 1.5rem 1.6rem;
  margin-bottom: 1.8rem;
}
.note-card.is-root .note-body { font-size: 1.05rem; }

.note-author {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
  font-size: 0.86rem;
}
.note-author img {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--cream-d);
}
.note-author .author-name {
  font-weight: 700;
  color: var(--navy);
}
.note-author .author-handle {
  color: var(--muted);
  font-size: 0.78rem;
}
.note-author time {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: italic;
  flex-shrink: 0;
}

.note-body {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  line-height: 1.7;
  font-size: 0.97rem;
}
.note-body a { color: var(--navy-l); }
.note-body a.nostr-mention { color: var(--orange); font-weight: 600; text-decoration: none; }
.note-body a.nostr-mention:hover { text-decoration: underline; }

/* ── Embedded notes (kind-1 quoted via nevent/note, NIP-52 calendar) ── */
.embed-note {
  background: var(--cream-d);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin: 0.6rem 0;
  font-size: 0.92rem;
  white-space: normal;
}
.embed-note .embed-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
}
.embed-note .embed-author img {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cream);
  flex-shrink: 0;
}
.embed-note .embed-author .author-name {
  font-weight: 700;
  color: var(--navy);
}
.embed-note .embed-author time {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.75rem;
  font-style: italic;
}
.embed-note .embed-body {
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.embed-note .embed-footer {
  margin-top: 0.5rem;
  font-size: 0.78rem;
}
.embed-note .embed-footer a {
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.embed-note .embed-footer a:hover { color: var(--orange); }

.embed-note.is-missing {
  color: var(--muted);
  font-style: italic;
  font-size: 0.88rem;
  padding: 0.7rem 0.9rem;
}
.embed-note.is-missing a { color: var(--navy-l); margin-left: 0.4rem; }

.embed-note.is-naddr {
  display: flex;
  align-items: center;
  padding: 0.7rem 0.9rem;
}
.embed-note.is-naddr a {
  color: var(--navy-l);
  font-weight: 600;
  text-decoration: none;
}
.embed-note.is-naddr a:hover { color: var(--orange); }

.embed-note.is-event .event-title {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 0.35rem;
  word-break: break-word;
}
/* Title as a link to the event on mynostr — keep the title look (no green
   underline), warm on hover. */
a.event-title { text-decoration: none; }
a.event-title:hover { color: var(--orange); }

/* Clickable organizer identity (avatar + name) — copies the npub. */
.embed-note .embed-author .author-id {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.embed-note .embed-author button.author-id .author-name { transition: color 0.12s; }
.embed-note .embed-author button.author-id:hover .author-name {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.embed-note.is-event .event-meta {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0.15rem 0;
  word-break: break-word;
}
.embed-note.is-event .event-meta .event-icon {
  flex-shrink: 0;
  width: 1.1rem;
  text-align: center;
  font-style: normal;
}

/* ── Cover thumbnail (NIP-52 `image`) ──
   With a cover image the card becomes a column: an [thumb | content] row
   (.event-top) followed by the full-width action bar, so the bar's dashed
   divider and buttons run under the image too. .event-col holds the
   author / title / meta. */
.embed-note.is-event.has-thumb {
  display: flex;
  flex-direction: column;
}
.embed-note.is-event .event-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.embed-note.is-event .event-thumb {
  flex: 0 0 auto;
  width: 103px;
  height: 103px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--border);
}
.embed-note.is-event .event-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.embed-note.is-event .event-col {
  flex: 1 1 auto;
  min-width: 0;
}

/* Push the ⋮ menu to the right edge of the author row (calendar cards
   have no timestamp to do it). */
.embed-note.is-event .embed-author .note-more { margin-left: auto; }

/* Event cards keep Renote + Zap right-aligned so they sit in the same
   place whether or not a left-slot control (the versions toggle) is
   present. (Scoped to event cards; the boosts action bar is unaffected.) */
.embed-note.is-event .note-actions { justify-content: flex-end; }

/* ── Featured (boosted) event cards ──
   A boosted event wears a gold border + soft pulsing halo — the same gold
   accent as the top-tier supporter avatars (community-status.css --gold
   #e0a92e), scaled up to a card-wide glow. Set on .is-featured by the
   calendar renderer when Feeds marks the card as boosted. */
.embed-note.is-event.is-featured {
  border-color: #e0a92e;
  box-shadow: 0 0 0 1px rgba(224,169,46,0.55), 0 0 14px 2px rgba(224,169,46,0.28);
  animation: lb-featured-glow 2.6s ease-in-out infinite;
}
@keyframes lb-featured-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(224,169,46,0.55), 0 0 12px 2px rgba(224,169,46,0.22); }
  50%      { box-shadow: 0 0 0 1px rgba(224,169,46,0.75), 0 0 20px 4px rgba(224,169,46,0.40); }
}
@media (prefers-reduced-motion: reduce) {
  .embed-note.is-event.is-featured { animation: none; }
}

/* ── Per-card overflow (⋮) menu ──
   Duplicated from boost-actions.css so the shared calendar renderer gets
   its menu on pages that don't load the boost action bar (Meetups,
   Community Feeds). Keep the two in sync if either changes. */
.note-more { position: relative; flex-shrink: 0; }
.note-more-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
  line-height: 1;
  padding: 0.15rem 0.4rem;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}
.note-more-btn:hover,
.note-more-btn[aria-expanded="true"] {
  background: rgba(247,147,26,0.12);
  color: var(--orange);
}
.note-more-btn .lb-icon { font-size: 1.2rem; line-height: 1; }
.note-more-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  min-width: 190px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(30,58,95,0.18);
  padding: 0.3rem;
  z-index: 50;
}
.note-more-menu[hidden] { display: none; }
.note-more-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  padding: 0.5rem 0.65rem;
  border-radius: 5px;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.note-more-item:hover { background: rgba(247,147,26,0.12); color: var(--orange); }

/* The per-card action bar (.note-actions) lives in boost-actions.css —
   pages that load the mutation handlers also load its styles. */

/* ── Note footer + reply tree ───────────────────────────────────── */
.note-footer {
  margin-top: 0.7rem;
  font-size: 0.78rem;
}
.note-footer a {
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.note-footer a:hover { color: var(--orange); }

.replies-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--orange);
  display: inline-block;
}
.replies-empty {
  color: var(--muted);
  font-style: italic;
  padding: 1rem 0;
}

.reply-children {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  border-left: 2px solid var(--cream-d);
  padding-left: 0.9rem;
}

@media (max-width: 600px) {
  .note-card { padding: 0.95rem 1rem; }
  .note-card.is-root { padding: 1.15rem 1.15rem; }
  .reply-children { padding-left: 0.6rem; }

  /* Featured event cards: stack the action bar on phones. Give the "Featured
     by …" cluster the full row so it left-aligns (like desktop) and forces
     Repost + Zap onto the line below, together and left-aligned. Scoped to
     .is-featured so non-featured cards keep their right-aligned single row. */
  .embed-note.is-event.is-featured .note-actions { justify-content: flex-start; }
  .embed-note.is-event.is-featured .note-actions-left {
    flex-basis: 100%;
    margin-right: 0;
  }
}