/* Modern engagement UI: reactions, bookmarks, notifications, unread, preview. */

.post-actions { display: flex; gap: .5rem; margin-top: .6rem; }
.react-btn, .bm-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  font: inherit; font-size: .85rem; cursor: pointer;
  padding: .25rem .6rem; border-radius: 999px;
  border: 1px solid var(--border, #d7dee6); background: transparent; color: var(--muted, #5b6b7b);
  transition: background .12s, color .12s, border-color .12s;
}
.react-btn:hover, .bm-btn:hover { background: rgba(127,127,127,.08); }
.react-btn.active { color: #e0245e; border-color: #e0245e; background: rgba(224,36,94,.08); }
.bm-btn.active { color: #d6a500; border-color: #d6a500; background: rgba(214,165,0,.10); }
.react-btn[aria-disabled] { cursor: default; opacity: .8; }

.preview-pane:empty { display: none; }
.preview-pane { margin: .5rem 0; padding: .6rem .8rem; border: 1px dashed var(--border, #d7dee6); border-radius: 8px; background: rgba(127,127,127,.04); }

.unread-dot {
  display: inline-block; width: .55rem; height: .55rem; border-radius: 50%;
  background: #2563eb; margin-right: .35rem; vertical-align: middle;
}

/* Notification bell + dropdown */
.notif-wrap { position: relative; display: inline-block; }
.notif-bell { background: none; border: 0; font-size: 1.1rem; cursor: pointer; position: relative; color: inherit; }
.notif-count {
  position: absolute; top: -6px; right: -8px; background: #e0245e; color: #fff;
  font-size: .65rem; font-weight: 700; line-height: 1; padding: .15rem .35rem; border-radius: 999px;
}
.notif-menu {
  display: none; position: absolute; right: 0; top: 130%; z-index: 50;
  width: 320px; max-height: 60vh; overflow-y: auto;
  background: var(--card, #fff); border: 1px solid var(--border, #d7dee6);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.notif-menu.open { display: block; }
.notif-head { padding: .6rem .9rem; font-weight: 700; border-bottom: 1px solid var(--border, #eceff3); }
.notif-item {
  display: block; padding: .6rem .9rem; border-bottom: 1px solid var(--border, #f0f2f5);
  color: inherit; text-decoration: none; font-size: .9rem;
}
.notif-item:hover { background: rgba(127,127,127,.06); }
.notif-item.unread { background: rgba(37,99,235,.06); }
.notif-time { display: block; font-size: .75rem; color: var(--muted, #8a97a5); margin-top: .15rem; }
.notif-empty, .notif-all { display: block; padding: .8rem .9rem; text-align: center; color: var(--muted, #8a97a5); }
.notif-all { font-weight: 600; color: #2563eb; }

[data-theme="dark"] .notif-menu { background: #1b2430; }

/* ---- SPA loading bar (driven by htmx requests in forum.js) ---- */
#page-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brand, #0f9d8a), #34d9c3);
  z-index: 1000; opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .25s ease;
}
#page-progress.active {
  opacity: 1; transform: scaleX(.9);
  transition: transform 8s cubic-bezier(.08,.6,.2,1), opacity .2s ease;
}

/* ---- Load-more post stream ---- */
.post-more { display: flex; justify-content: center; margin: 6px 0 10px; }
.post-more:empty { display: none; }
.post-more .load-more { min-width: 220px; }

/* Fade-in for htmx-appended posts / replies (Discourse-like, no full reload) */
.htmx-added { animation: cf-fade .26s ease; }
@keyframes cf-fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }