.
$this->layout('layouts/public');
?>
<style>
/* Scoped under #pdx so the detail-page styles never collide with the global
   app.css (.shell/.modal/.card/.chip/.avatar/.right all exist there). */
#pdx{--pri:#1A56DB;--pri-dk:#1140A0;--pri-lt:#EBF5FF;--grn:#0E9F6E;--grn-lt:#E3FCEF;--org:#FF5A1F;--org-lt:#FFF3EE;--pur:#7E3AF2;--pur-lt:#F5F3FF;--amb:#F59E0B;--amb-lt:#FFFBEB;--red:#EF4444;--red-lt:#FEF2F2;--txt:#111928;--muted:#667085;--light:#98A2B3;--bdr:#E5E7EB;--bdr-lt:#F1F3F6;--bg:#F5F6F8;--soft:#F8FAFC;--sh0:0 1px 3px rgba(16,24,40,.06);--sh1:0 8px 24px rgba(16,24,40,.08);--dp:'Sora',sans-serif;--maxw:1240px;color:var(--txt);font-size:13px}
#pdx *{box-sizing:border-box}#pdx a{text-decoration:none;color:inherit}#pdx button{font-family:inherit;border:0;background:none;cursor:pointer}#pdx img{max-width:100%;display:block}
#pdx .svg-icon{width:18px;height:18px;display:inline-block;vertical-align:-4px;flex-shrink:0}#pdx .btn .svg-icon,#pdx .chip .svg-icon,#pdx .action .svg-icon,#pdx .react-pill .svg-icon,#pdx .nicon .svg-icon{width:16px;height:16px}#pdx .thread-note{font-size:11.5px;color:var(--muted);line-height:1.45;background:var(--soft);border:1px solid var(--bdr-lt);border-radius:13px;padding:10px;margin-top:10px}#pdx .reply-icons{display:flex;gap:4px}#pdx .reply-icons button{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--muted);font-weight:900}#pdx .reply-icons button:hover{background:var(--soft);color:var(--pri)}
#pdx .modal{position:fixed;inset:0;z-index:2000;background:rgba(17,24,39,.48);display:none;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(5px)}#pdx .modal.show{display:flex}#pdx .modalbox{width:min(480px,100%);background:#fff;border:1px solid var(--bdr);border-radius:20px;box-shadow:0 16px 42px rgba(16,24,40,.14);overflow:hidden}#pdx .modal-head{padding:15px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}#pdx .modal-head b{font-family:var(--dp);font-size:15px}#pdx .close{width:34px;height:34px;border-radius:999px;background:var(--soft);font-weight:900;font-size:20px;line-height:1;color:var(--muted);display:grid;place-items:center}#pdx .close:hover{background:var(--red-lt);color:var(--red)}#pdx .modal-body{padding:14px}#pdx .react-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}#pdx .react-choice{height:44px;border:1.5px solid var(--bdr);border-radius:13px;background:#fff;font-weight:900;text-align:left;padding:0 12px;display:flex;align-items:center;gap:8px}#pdx .react-choice:hover{border-color:var(--pri);background:var(--pri-lt);color:var(--pri)}#pdx .reason{display:flex;flex-direction:column;gap:8px}#pdx .reason label{display:flex;gap:8px;align-items:center;border:1px solid var(--bdr);border-radius:12px;padding:10px;font-weight:750}
#pdx .btn{height:40px;border-radius:12px;padding:0 15px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}#pdx .btn-pri{background:var(--pri);color:#fff}#pdx .btn-ghost{background:#fff;border:1.5px solid var(--bdr);color:var(--txt)}
#pdx .shell{max-width:var(--maxw);margin:0 auto;padding:14px 24px 80px;display:grid;grid-template-columns:208px minmax(0,1fr) 272px;gap:16px;align-items:start}#pdx .left,#pdx .right{position:sticky;top:84px;display:flex;flex-direction:column;gap:12px;min-width:0}#pdx .center{min-width:0;display:flex;flex-direction:column;gap:12px}#pdx .card,#pdx .sidecard{background:#fff;border:1px solid var(--bdr);border-radius:18px;box-shadow:var(--sh0);overflow:hidden}#pdx .sidecard{padding:14px}#pdx .side-title{font-family:var(--dp);font-size:14px;font-weight:800;margin-bottom:10px}#pdx .crumb{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;margin-bottom:2px}#pdx .crumb b{color:var(--txt)}
#pdx .compose-mini{background:linear-gradient(135deg,var(--pri),var(--pur));color:#fff;border-radius:18px;padding:14px;box-shadow:var(--sh1);margin-top:12px}#pdx .compose-mini b{font-family:var(--dp);font-size:14px}#pdx .compose-mini p{font-size:11.5px;line-height:1.45;opacity:.82;margin:5px 0 12px}#pdx .compose-mini .btn{background:#fff;color:var(--pri);width:100%}#pdx .trend{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 0;border-top:1px solid var(--bdr-lt)}#pdx .trend:first-of-type{border-top:0}#pdx .trend b{font-size:12.5px}#pdx .trend span{font-size:10.5px;color:var(--muted)}#pdx .safety{background:linear-gradient(135deg,var(--grn-lt),#fff);border:1px solid #b6ebd6;border-radius:15px;padding:12px}#pdx .safety b{font-size:12.8px}#pdx .safety p{font-size:11.3px;color:#0b7c56;line-height:1.45;margin-top:3px}#pdx .nav a{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:13px;font-weight:800;color:#344054}#pdx .nav a:hover,#pdx .nav a.on{background:var(--pri-lt);color:var(--pri)}#pdx .nicon{width:28px;height:28px;border-radius:10px;background:var(--soft);display:grid;place-items:center}#pdx .thread-head{height:54px;display:flex;align-items:center;gap:10px;padding:0 14px;background:#fff;border-bottom:1px solid var(--bdr)}#pdx .back{width:34px;height:34px;border-radius:11px;background:var(--soft);display:grid;place-items:center;font-weight:900;color:var(--muted)}#pdx .thread-head h2{font-family:var(--dp);font-size:16px;font-weight:800}#pdx .thread-head span{font-size:11.5px;color:var(--muted)}
#pdx .post{padding:14px}#pdx .post-top{display:flex;align-items:flex-start;gap:10px}#pdx .avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0}#pdx .post-main{min-width:0;flex:1}
#pdx .post-author{display:flex;align-items:center;gap:10px}#pdx .post-author .avatar{width:42px;height:42px}#pdx .author-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}#pdx .author-top{display:flex;align-items:center;gap:5px;min-width:0}#pdx .author-top .name{font-weight:900;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#pdx .vtick{flex:0 0 auto;width:15px;height:15px;border-radius:50%;background:var(--pri);color:#fff;font-size:9px;font-weight:900;display:grid;place-items:center}#pdx .author-sub{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);font-weight:600;min-width:0}#pdx .author-sub .scope{color:var(--pri);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#pdx .author-sub .dot{opacity:.45}
#pdx .name{font-weight:900;font-size:14px}#pdx .handle{font-size:12px;color:var(--muted)}#pdx .verified,#pdx .scope{display:inline-flex;font-size:10px;font-weight:900;padding:3px 7px;border-radius:999px}#pdx .verified{background:var(--grn-lt);color:var(--grn)}#pdx .scope{background:var(--pri-lt);color:var(--pri)}#pdx .more{margin-left:auto;flex:0 0 auto;width:32px;height:32px;border-radius:10px;background:var(--soft);display:grid;place-items:center;font-weight:900;color:var(--muted);cursor:pointer}#pdx .more:hover{background:var(--pri-lt);color:var(--pri)}#pdx .post-title{font-family:var(--dp);font-size:21px;letter-spacing:-.6px;line-height:1.22;margin-top:12px;font-weight:800}#pdx .post-body{font-size:15px;line-height:1.62;margin-top:9px;color:#202939;white-space:pre-line}#pdx .post-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:12px}#pdx .chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 9px;font-size:10.5px;font-weight:900}#pdx .chip.pri{background:var(--pri-lt);color:var(--pri)}#pdx .chip.grn{background:var(--grn-lt);color:var(--grn)}#pdx .chip.org{background:var(--org-lt);color:var(--org)}#pdx .chip.pur{background:var(--pur-lt);color:var(--pur)}#pdx .chip.amb{background:var(--amb-lt);color:#b45309}#pdx .chip.red{background:var(--red-lt);color:var(--red)}
#pdx .post-media{margin-top:12px;border-radius:18px;overflow:hidden;border:1px solid var(--bdr);background:var(--soft)}#pdx .media-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2px}#pdx .media-grid img,#pdx .single-media img{width:100%;height:260px;object-fit:cover}#pdx .media-grid .small-imgs{display:grid;grid-template-rows:1fr 1fr;gap:2px}#pdx .media-grid .small-imgs img{height:129px}
#pdx .p-gallery{margin-top:12px;display:grid;gap:3px;border-radius:16px;overflow:hidden;background:var(--bdr-lt)}#pdx .p-gallery .pg-cell{position:relative;padding:0;border:0;background:var(--soft);cursor:zoom-in;overflow:hidden;display:block}#pdx .p-gallery .pg-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}#pdx .p-gallery .pg-cell:hover img{transform:scale(1.03)}#pdx .p-gallery.g-1 .pg-cell{max-height:520px}#pdx .p-gallery.g-1 .pg-cell img{height:auto;max-height:520px}#pdx .p-gallery.g-2,#pdx .p-gallery.g-3,#pdx .p-gallery.g-4,#pdx .p-gallery.g-5{height:340px}#pdx .p-gallery.g-2{grid-template-columns:1fr 1fr}#pdx .p-gallery.g-3{grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr}#pdx .p-gallery.g-3 .pg-cell:first-child{grid-row:1 / span 2}#pdx .p-gallery.g-4,#pdx .p-gallery.g-5{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}#pdx .pg-more{position:absolute;inset:0;background:rgba(17,24,39,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--dp);font-size:28px;font-weight:800}
#pdx .pg-lb{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;background:rgba(9,12,20,.93);padding:24px}#pdx .pg-lb.show{display:flex}#pdx .pg-lb img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:10px}#pdx .pg-lb-x{position:absolute;top:16px;right:18px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:24px;display:grid;place-items:center}#pdx .pg-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:26px;display:grid;place-items:center}#pdx .pg-lb-prev{left:18px}#pdx .pg-lb-next{right:18px}#pdx .pg-lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;font-size:12.5px;font-weight:800;background:rgba(255,255,255,.14);border-radius:999px;padding:5px 13px}#pdx .post-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--bdr-lt);border-bottom:1px solid var(--bdr-lt);margin-top:14px}#pdx .stat{padding:10px;text-align:center;border-right:1px solid var(--bdr-lt)}#pdx .stat:last-child{border-right:0}#pdx .stat b{font-family:var(--dp);font-size:15px}#pdx .stat span{display:block;font-size:10.7px;color:var(--muted);margin-top:2px}
#pdx .actionbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:11px}#pdx .action{height:36px;border-radius:12px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:900}#pdx .action:hover,#pdx .action.on{background:var(--pri-lt);color:var(--pri)}#pdx .reaction-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;padding:10px;border-radius:14px;background:var(--soft);border:1px solid var(--bdr-lt)}#pdx .react-pill{height:31px;border:1px solid var(--bdr);background:#fff;border-radius:999px;padding:0 10px;font-weight:900;color:#475467;font-size:11.5px}
#pdx .detail-box,#pdx .poll-box,#pdx .deal-box{margin-top:12px;border:1px solid var(--bdr);background:var(--soft);border-radius:16px;padding:12px}#pdx .detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}#pdx .detail-grid div{background:#fff;border:1px solid var(--bdr-lt);border-radius:12px;padding:10px}#pdx .detail-grid small{display:block;color:var(--muted);font-weight:800;font-size:10px;text-transform:uppercase}#pdx .detail-grid b{display:block;margin-top:4px}#pdx .poll-option{position:relative;width:100%;min-height:42px;border:1px solid var(--bdr);border-radius:13px;background:#fff;margin-top:8px;overflow:hidden;text-align:left;font-weight:900;cursor:pointer}#pdx .poll-fill{position:absolute;inset:0 auto 0 0;background:var(--pri-lt);z-index:0}#pdx .poll-option span{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:0 12px}#pdx .deal-price{font-family:var(--dp);font-size:28px;font-weight:800;color:var(--org)}#pdx .deal-price del{font-size:14px;color:var(--muted);margin-left:8px}#pdx .deal-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}#pdx .deal-bar{height:8px;border-radius:99px;background:#fff;border:1px solid var(--bdr);overflow:hidden;margin-top:10px}#pdx .deal-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--org),var(--pur))}
#pdx .reply-box{padding:13px 14px;display:flex;gap:10px;border-top:1px solid var(--bdr-lt)}#pdx .reply-box img{width:38px;height:38px;border-radius:50%;flex-shrink:0}#pdx .reply-main{flex:1;min-width:0}#pdx .reply-main textarea{width:100%;min-height:60px;border:0;outline:0;resize:vertical;font-size:14px;line-height:1.45;background:#fff}#pdx .reply-tools{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--bdr-lt);padding-top:9px}#pdx .tabs{display:flex;background:#fff;border-bottom:1px solid var(--bdr);position:sticky;top:70px;z-index:10}#pdx .tab{flex:1;height:46px;font-weight:900;color:var(--muted);position:relative;cursor:pointer}#pdx .tab.on{color:var(--pri)}#pdx .tab.on:after{content:"";position:absolute;left:25%;right:25%;bottom:0;height:3px;border-radius:3px;background:var(--pri)}#pdx .comment{display:flex;gap:10px;padding:14px;border-bottom:1px solid var(--bdr-lt);background:#fff}#pdx .comment .avatar{width:40px;height:40px}#pdx .comment-body{min-width:0;flex:1}#pdx .comment-head{display:flex;gap:5px;align-items:center;flex-wrap:wrap}#pdx .comment-name{font-weight:900}#pdx .comment-time{color:var(--muted);font-size:11.5px}#pdx .comment-text{margin-top:5px;font-size:13.5px;line-height:1.5;color:#202939;white-space:pre-line}#pdx .comment-actions{display:flex;gap:14px;margin-top:9px;color:var(--muted);font-size:11.5px;font-weight:850}#pdx .load-more,#pdx .empty-comments{height:46px;width:100%;font-weight:900;color:var(--pri);background:#fff}#pdx .empty-comments{display:grid;place-items:center;color:var(--muted)}#pdx .pulse-card{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--bdr-lt)}#pdx .pulse-card:first-of-type{border-top:0;padding-top:0}#pdx .pulse-card img{width:58px;height:52px;border-radius:12px;object-fit:cover;flex-shrink:0}#pdx .pulse-card b{font-size:12.5px;line-height:1.3}#pdx .pulse-card span{display:block;color:var(--muted);font-size:10.8px;margin-top:3px}#pdx .mobile-dock{display:none}
#pdx .poll-box[data-show-results="0"] .poll-fill{width:0!important}#pdx .poll-box[data-show-results="0"] .poll-option b{color:var(--pri);font-size:11px}#pdx .poll-option.is-voting{opacity:.7}#pdx .poll-option.on{border-color:var(--pri);box-shadow:0 0 0 3px rgba(26,86,219,.08)}#pdx .poll-note{margin-top:8px;color:var(--muted);font-size:11.5px;font-weight:800}#pdx .poll-error{margin-top:8px;color:var(--red);font-size:11.5px;font-weight:900}#pdx .comment.is-reply{margin-left:50px;border-left:2px solid var(--bdr-lt)}#pdx .comment-name-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}#pdx .author-badge{background:var(--pri-lt);color:var(--pri);border-radius:999px;padding:2px 6px;font-size:10px;font-weight:900}#pdx .comment-actions button{background:none;cursor:pointer}#pdx .comment-actions button:hover{color:var(--pri)}#pdx .comment-actions button.is-on{color:var(--pri);font-weight:900}#pdx .comment-reactors{display:inline-flex;align-items:center;gap:4px;border-radius:999px;background:var(--pri-lt);color:var(--pri);padding:2px 7px;font-size:10.5px;font-weight:900;cursor:pointer}#pdx .replying-pill{display:inline-flex;align-items:center;gap:6px;background:var(--pri-lt);color:var(--pri);font-size:11px;font-weight:900;border-radius:999px;padding:5px 9px;margin-bottom:7px}#pdx .replying-pill button{font-weight:900;color:inherit;cursor:pointer}#pdx .reactor-list{display:flex;flex-direction:column;gap:8px}#pdx .reactor-row{display:flex;align-items:center;gap:9px;padding:8px;border:1px solid var(--bdr-lt);border-radius:12px}#pdx .reactor-row img{width:34px;height:34px;border-radius:50%;object-fit:cover}#pdx .trend-tabs{display:flex;gap:6px;margin-bottom:8px}#pdx .trend-tab{height:28px;border:1px solid var(--bdr);border-radius:999px;padding:0 10px;font-size:11px;font-weight:900;color:var(--muted);background:#fff;cursor:pointer}#pdx .trend-tab.on{background:var(--pri);border-color:var(--pri);color:#fff}#pdx .trend-panel[hidden]{display:none}#pdx .trend a{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}
#pdx .comment-actions button{display:inline-flex;align-items:center;gap:4px}#pdx .c-like .c-ico{font-size:12px}#pdx .c-like.is-on{color:var(--pri)}#pdx .comment-reactors{display:inline-flex;align-items:center;gap:5px}#pdx .react-avs{display:inline-flex}#pdx .react-avs img{width:18px;height:18px;border-radius:50%;object-fit:cover;border:1.5px solid #fff;margin-right:-6px}#pdx .react-avs img:last-child{margin-right:2px}#pdx .comment.is-reply{position:relative}
/* ── Pulse Engagement Bar (pe-*) — X-inspired single-row icon system ─────────
 * One source of truth. Loaded inside a host page's <style> block.
 * Uses global tokens (--pri, --txt, etc.) from app.css.
 *
 * Layout: horizontal flex row, each item is icon + count with hover affordance.
 * Resting: neutral grey icon + count. Hover: tinted circle behind icon, label colors.
 * Active: filled icon + colored count text.
 */

.pe-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 6px 4px;
  border-top: 1px solid var(--bdr-lt);
  margin-top: 12px;
  max-width: 100%;
  flex-wrap: nowrap;
  user-select: none;
}

/* Each clickable item is a tight icon+count cluster */
.pe-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  position: relative;
  transition: color .12s;
  min-width: 0;
  flex: 0 0 auto;
}

/* Circle behind icon — X-style hover halo */
.pe-ic-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transition: background-color .12s;
  flex-shrink: 0;
}
.pe-ic {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.pe-num { font-variant-numeric: tabular-nums; line-height: 1; }
.pe-num:empty { display: none; }

/* ── Per-action hover tints ───────────────────────────────────────────────── */
.pe-react:hover                { color: #e11d48; }
.pe-react:hover  .pe-ic-wrap   { background: rgba(225,29,72,.12); }
.pe-comment:hover              { color: var(--pri); }
.pe-comment:hover .pe-ic-wrap  { background: var(--pri-lt); }
.pe-share:hover                { color: #16a34a; }
.pe-share:hover  .pe-ic-wrap   { background: rgba(22,163,74,.12); }
.pe-save:hover                 { color: var(--pri); }
.pe-save:hover   .pe-ic-wrap   { background: var(--pri-lt); }

.pe-views { cursor: default; }
.pe-views:hover { color: var(--muted); }

/* Owner / read-only react badge — no popover, no hover affordance */
.pe-react-readonly { cursor: default; }
.pe-react-readonly:hover { color: var(--muted); }
.pe-react-readonly:hover .pe-ic-wrap { background: transparent; }

/* ── Active (mine) states ─────────────────────────────────────────────────── */
.pe-react.is-active.is-like      { color: #e11d48; }
.pe-react.is-active.is-like .pe-ic { fill: #e11d48; stroke: #e11d48; }
.pe-react.is-active.is-useful    { color: #10b981; }
.pe-react.is-active.is-useful .pe-ic { fill: #10b981; stroke: #10b981; }

.pe-save.is-active               { color: var(--pri); }
.pe-save.is-active .pe-ic        { fill: var(--pri); stroke: var(--pri); }

/* ── React popover — rich pill design (Useful / Like + icon + count) ─────── */
.pe-react { position: relative; }
.pe-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(15,23,42,.15), 0 2px 8px rgba(15,23,42,.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 30;
  white-space: nowrap;
}
.pe-react.is-open .pe-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.pe-pop-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: all .18s cubic-bezier(.4,0,.2,1);
  letter-spacing: .01em;
}
.pe-pop-btn span:not(.pe-pop-n) { line-height: 1; }
.pe-pop-btn svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  transition: transform .18s;
}
.pe-pop-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  color: #334155;
  font-size: 11.5px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pe-pop-n:empty { display: none; }

.pe-pop-btn.pe-pop-useful:hover { background: #ecfdf5; border-color: #a7f3d0; color: #059669; }
.pe-pop-btn.pe-pop-useful:hover .pe-pop-n { background: rgba(16,185,129,.15); color: #047857; }
.pe-pop-btn.pe-pop-useful.is-on {
  background: linear-gradient(135deg,#10b981,#059669);
  border-color: #059669;
  color: #fff;
  box-shadow: 0 4px 14px rgba(16,185,129,.35);
}
.pe-pop-btn.pe-pop-useful.is-on svg  { fill: #fff; stroke: #fff; transform: scale(1.08); }
.pe-pop-btn.pe-pop-useful.is-on .pe-pop-n { background: rgba(255,255,255,.25); color: #fff; }

.pe-pop-btn.pe-pop-like:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.pe-pop-btn.pe-pop-like:hover .pe-pop-n { background: rgba(225,29,72,.15); color: #b91c1c; }
.pe-pop-btn.pe-pop-like.is-on {
  background: linear-gradient(135deg,#f43f5e,#e11d48);
  border-color: #e11d48;
  color: #fff;
  box-shadow: 0 4px 14px rgba(225,29,72,.35);
}
.pe-pop-btn.pe-pop-like.is-on svg { fill: #fff; stroke: #fff; transform: scale(1.08); }
.pe-pop-btn.pe-pop-like.is-on .pe-pop-n { background: rgba(255,255,255,.25); color: #fff; }

/* ── Click-pulse animation for active state changes ──────────────────────── */
.pe-bar .pe-ic.is-pulsing {
  animation: pe-beat .42s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pe-beat {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  65%  { transform: scale(.92); }
  100% { transform: scale(1); }
}

/* ── Mobile / small-screen tightening ────────────────────────────────────── */
@media (max-width: 600px) {
  .pe-bar { gap: 0; padding: 4px 0; }
  .pe-item { font-size: 12.5px; gap: 2px; }
  .pe-ic-wrap { width: 32px; height: 32px; }
  .pe-ic { width: 18px; height: 18px; }
  /* Hide the views counter on phones to save horizontal space — still visible
     in the dedicated post view */
  .pe-views { display: none; }
}
@media (max-width: 380px) {
  .pe-item { font-size: 12px; }
  .pe-ic-wrap { width: 30px; height: 30px; }
  .pe-ic { width: 17px; height: 17px; }
  .pe-pop-btn { padding: 0 9px; height: 30px; font-size: 12px; }
}
@media(max-width:1120px){#pdx .shell{grid-template-columns:minmax(0,1fr) 260px}#pdx .left{display:none}}@media(max-width:880px){#pdx .right{display:none}#pdx .shell{display:block;padding:10px 14px 86px}#pdx .thread-head{position:static;border-radius:14px 14px 0 0}#pdx .tabs{position:static}#pdx .post-title{font-size:19px}#pdx .post-body{font-size:14.5px}#pdx .media-grid{grid-template-columns:1fr}#pdx .media-grid img{height:210px}#pdx .media-grid .small-imgs{grid-template-columns:1fr 1fr;grid-template-rows:none}#pdx .media-grid .small-imgs img{height:120px}#pdx .detail-grid{grid-template-columns:1fr}#pdx .post-stats{grid-template-columns:repeat(2,1fr)}#pdx .actionbar{overflow:hidden;flex-wrap:wrap;justify-content:flex-start}#pdx .mobile-dock{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;z-index:80;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--bdr)}#pdx .mobile-dock a,#pdx .mobile-dock button{height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:var(--muted);font-weight:900}#pdx .mobile-dock b{font-size:17px;line-height:1}}
@media(max-width:560px){#pdx .shell{padding:8px 10px 90px}#pdx .center{gap:9px}#pdx .card{border-radius:14px}#pdx .crumb{font-size:11px;margin-bottom:4px}#pdx .post{padding:12px 12px 13px}#pdx .thread-head{height:47px;padding:0 11px}#pdx .thread-head h2{font-size:14.5px}#pdx .thread-head span{font-size:10.5px}#pdx .post-author{gap:9px}#pdx .post-author .avatar{width:40px;height:40px}#pdx .author-top .name{font-size:13.5px}#pdx .author-sub{font-size:11px}#pdx .more{width:30px;height:30px}#pdx .post-title{font-size:17.5px;letter-spacing:-.3px;line-height:1.28;margin-top:10px}#pdx .post-body{font-size:14px;line-height:1.55;margin-top:7px}#pdx .post-meta{margin-top:10px;gap:6px}#pdx .post-stats{margin-top:12px}#pdx .post-stats .stat{padding:8px 6px}#pdx .post-stats .stat b{font-size:15px}#pdx .post-stats .stat span{font-size:10px}#pdx .detail-box,#pdx .poll-box,#pdx .deal-box{padding:11px;margin-top:11px}#pdx .deal-price{font-size:24px}#pdx .thread-note{padding:9px;font-size:11px;margin-top:9px}#pdx .reply-box{padding:11px 12px}#pdx .reply-box img{width:34px;height:34px}#pdx .reply-main textarea{min-height:52px;font-size:13.5px}#pdx .tabs{top:113px}#pdx .tab{height:42px;font-size:12.5px}#pdx .comment{padding:11px 12px;gap:9px}#pdx .comment .avatar{width:34px;height:34px}#pdx .comment-name{font-size:12.8px}#pdx .comment-time{font-size:11px}#pdx .comment-text{font-size:13px;line-height:1.48;margin-top:4px}#pdx .comment-actions{gap:12px;margin-top:7px;font-size:11px}#pdx .comment.is-reply{margin-left:38px}#pdx .p-gallery{margin-top:10px}#pdx .p-gallery.g-2,#pdx .p-gallery.g-3,#pdx .p-gallery.g-4,#pdx .p-gallery.g-5{height:230px}#pdx .p-gallery.g-1 .pg-cell,#pdx .p-gallery.g-1 .pg-cell img{max-height:360px}}
@media(max-width:380px){#pdx .shell{padding:7px 8px 88px}#pdx .post{padding:11px}#pdx .thread-head{height:44px;padding:0 10px}#pdx .thread-head h2{font-size:13.8px}#pdx .post-author .avatar{width:37px;height:37px}#pdx .author-top .name{font-size:13px}#pdx .post-title{font-size:16px;line-height:1.3;margin-top:9px}#pdx .post-body{font-size:13.5px;line-height:1.5;margin-top:6px}#pdx .post-stats .stat{padding:7px 4px}#pdx .post-stats .stat b{font-size:14px}#pdx .post-stats .stat span{font-size:9.2px}#pdx .detail-grid{gap:6px}#pdx .deal-price{font-size:21px}#pdx .comment{padding:10px}#pdx .comment .avatar{width:31px;height:31px}#pdx .comment-text{font-size:12.6px}#pdx .comment.is-reply{margin-left:30px}}
</style>

<div id="pdx">
<div class="shell pulse-thread-shell">
  <aside class="left">
    <nav class="sidecard nav">
      <a class="on" href="https://beta.gojuju.ng/pulse"><span class="nicon"><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h5v-6h4v6h5V9.5"/></svg></span> Pulse Home</a>
      <a href="https://beta.gojuju.ng/pulse/flash-deals"><span class="nicon"><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/></svg></span> Flash Deals</a>
      <a href="https://beta.gojuju.ng/requests"><span class="nicon"><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 12V5.5a1.5 1.5 0 0 1 3 0V11"/><path d="M11 11V4.5a1.5 1.5 0 0 1 3 0V11"/><path d="M14 11V6.5a1.5 1.5 0 0 1 3 0V13"/><path d="M8 12l-1.6-1.6a1.6 1.6 0 0 0-2.3 2.2l4.7 5.4a7 7 0 0 0 5.2 2.4h.5A5.5 5.5 0 0 0 20 15v-3.5a1.5 1.5 0 0 0-3 0V13"/></svg></span> Requests</a>
      <a href="https://beta.gojuju.ng/search"><span class="nicon"><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8h12l-1 13H7L6 8Z"/><path d="M9 8a3 3 0 0 1 6 0"/></svg></span> Marketplace</a>
      <a href="https://beta.gojuju.ng/profile"><span class="nicon"><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4h12v17l-6-3.5L6 21V4Z"/></svg></span> My Account</a>
    </nav>
    <div class="compose-mini"><b>Share something useful</b><p>Post an update, request, flash deal, lost item, job, or campus question.</p><a class="btn" href="https://beta.gojuju.ng/pulse"><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg> Create Pulse Post</a></div>
    <div class="sidecard"><div class="side-title">Thread tools</div><a class="btn btn-ghost" style="width:100%;margin-bottom:8px" href="https://beta.gojuju.ng/pulse/20#comments"><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a8 8 0 0 1-8 8H5l-2 2 1.4-5A8 8 0 1 1 21 12Z"/></svg> Open comments</a><button class="btn btn-ghost" style="width:100%" onclick="navigator.clipboard?.writeText(location.href)"><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy link</button></div>
  </aside>

  <section class="center">
    <div class="crumb"><a href="https://beta.gojuju.ng/pulse">Campus Pulse</a><span>/</span><a>UNILAG Distance Learning</a><span>/</span><b>Post</b></div>
    <article class="card">
      <div class="thread-head"><button class="back" onclick="history.length>1?history.back():location.href='https://beta.gojuju.ng/pulse'"><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg></button><div><h2>Pulse Post</h2><span>Thread, reactions and comments</span></div></div>
      <div class="post">
        <div class="post-top">
          <div class="post-main">
            <div class="post-author">
              <img class="avatar" src="https://beta.gojuju.ng/storage/uploads/avatars/2026/06/027b4f8f-5eb4-4687-88a6-60a6fa3df941.jpg" alt="">
              <div class="author-info">
                <span class="author-top"><span class="name">Uche Ademola</span></span>
                <span class="author-sub"><span>01 Jul 2026</span><span class="dot">·</span><span class="scope">UNILAG Distance Learning</span></span>
              </div>
              <button class="more" onclick="openReport()"><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></svg></button>
            </div>
            <h1 class="post-title">Who will win this 2027 election</h1>
            <div class="post-body">Who will win this 2027 election</div>            <div class="post-meta"><span class="chip pur"><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20V10"/><path d="M12 20V4"/><path d="M20 20v-7"/></svg> Poll</span><span>2026-07-01 13:44:27</span></div>

            
            
            
            
                        
            <div class="post-stats"><div class="stat"><b id="commentCount">0</b><span>comments</span></div><div class="stat"><b>1</b><span>reactions</span></div><div class="stat"><b>0</b><span>shares</span></div><div class="stat"><b>8</b><span>views</span></div></div>
                        <div class="pe-bar pp-engagement-bar" data-post-id="20" data-post-type="poll">

  <!-- 1 · Comments — links to the post's #comments anchor -->
    <a class="pe-item pe-comment" href="https://beta.gojuju.ng/pulse/20#comments" aria-label="Comments">
    <span class="pe-ic-wrap">
      <svg class="pe-ic" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
      </svg>
    </span>
    <span class="pe-num" id="pe-c-20"></span>
  </a>
  
  <!-- 2 · React (click → popover with Useful + Like; owners see a static badge) -->
      <span class="pe-item pe-react  pe-react-readonly"
       title="Sign in to react"       aria-label="React" data-cid="20">
    <span class="pe-ic-wrap">
              <svg class="pe-ic" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
        </svg>
          </span>
    <span class="pe-num" id="pe-react-20">2</span>

      </span>
  
  <!-- 3 · Views (display only) -->
  <span class="pe-item pe-views" title="Views" aria-label="Views">
    <span class="pe-ic-wrap">
      <svg class="pe-ic" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
        <circle cx="12" cy="12" r="3"/>
      </svg>
    </span>
    <span class="pe-num">8</span>
  </span>

  <!-- 4 · Save / bookmark -->
      <button type="button" class="pe-item pe-save" onclick="openLoginDrawer?.()" aria-label="Sign in to save">
    <span class="pe-ic-wrap">
      <svg class="pe-ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
    </span>
    <span class="pe-num">1</span>
  </button>
    
  <!-- 5 · Share — native share API with WhatsApp/copy fallback.
       Title/URL go through data-attrs (HTML-escaped) so quotes / specials
       can't break the onclick attribute parsing. -->
    <button type="button" class="pe-item pe-share"
          data-pid="20"
          data-title="Who will win this 2027 election"
          data-url="https://beta.gojuju.ng/pulse/20"
          onclick="peShare(this.dataset.pid, this.dataset.title, this.dataset.url)"
          aria-label="Share">
    <span class="pe-ic-wrap">
      <svg class="pe-ic" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
        <polyline points="16 6 12 2 8 6"/>
        <line x1="12" y1="2" x2="12" y2="15"/>
      </svg>
    </span>
    <span class="pe-num" id="pe-sh-20"></span>
  </button>
  
</div>
            <div class="thread-note"><b>Campus trust layer:</b> use the engagement bar above for post reactions. Replies and comment reactions stay below.</div>
          </div>
        </div>
      </div>

      <div class="reply-box" id="replyBox">
        <img src="https://i.pravatar.cc/80?img=12" alt="">
        <div class="reply-main">
                      <a class="btn btn-pri" href="https://beta.gojuju.ng/login">Log in to reply</a>
                  </div>
      </div>
      <div class="tabs"><button class="tab on" type="button">Comments</button><button class="tab" type="button" onclick="location.href='https://beta.gojuju.ng/pulse'">Back to feed</button></div>
      <div id="comments"><div class="empty-comments">Loading comments...</div></div>
      <button class="load-more" type="button" onclick="loadComments()">Refresh comments</button>
    </article>
  </section>

  <aside class="right">
        <div class="sidecard"><div class="side-title">More like this</div>
              <p style="color:var(--muted);line-height:1.5">No related posts yet.</p>
          </div>
    <div class="sidecard"><div class="side-title">Trending on campus</div><div class="trend-tabs"><button class="trend-tab on" type="button" onclick="showTrendPeriod('day',this)">Day</button><button class="trend-tab" type="button" onclick="showTrendPeriod('week',this)">Week</button><button class="trend-tab" type="button" onclick="showTrendPeriod('month',this)">Month</button></div>
              <div class="trend-panel" data-trend-panel="day" >
                                            <div class="trend"><a href="https://beta.gojuju.ng/pulse/tag/freshers?trend_scope=campus"><div><b>#freshers</b><span>Hot today - 1 posts</span></div><span class="chip pri">Hot</span></a></div>
                  </div>
              <div class="trend-panel" data-trend-panel="week" hidden>
                                            <div class="trend"><a href="https://beta.gojuju.ng/pulse/tag/freshers?trend_scope=campus"><div><b>#freshers</b><span>Rising this week - 1 posts</span></div><span class="chip pri">Hot</span></a></div>
                  </div>
              <div class="trend-panel" data-trend-panel="month" hidden>
                                            <div class="trend"><a href="https://beta.gojuju.ng/pulse/tag/freshers?trend_scope=campus"><div><b>#freshers</b><span>Useful this month - 1 posts</span></div><span class="chip pri">Hot</span></a></div>
                  </div>
          </div>
    <div class="safety"><b><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/></svg> Safety reminder</b><p>For marketplace replies, keep negotiation in chat. Avoid upfront payment for unverified deals.</p></div>
    <div class="sidecard"><div class="side-title">Thread tools</div><button class="btn btn-ghost" style="width:100%;margin-bottom:8px" type="button" onclick="navigator.clipboard?.writeText(location.href)"><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy link</button><button class="btn btn-ghost" style="width:100%;margin-bottom:8px" type="button" onclick="openReactions()"><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><path d="M9 9h.01"/><path d="M15 9h.01"/></svg> React</button><button class="btn btn-ghost" style="width:100%;color:var(--red)" type="button" onclick="openReport()"><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 22V4"/><path d="M5 4h11l-1 4 1 4H5"/></svg> Report post</button></div>
  </aside>
</div>
<div class="modal" id="reactionModal" onclick="if(event.target===this)closeModal('reactionModal')"><div class="modalbox"><div class="modal-head"><b>React to this post</b><button class="close" type="button" onclick="closeModal('reactionModal')">&times;</button></div><div class="modal-body"><div class="react-grid"><button class="react-choice" type="button" onclick="pdxReact('useful')"><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/><path d="M7 11 11 2a3 3 0 0 1 3 3v4h5a2 2 0 0 1 2 2l-1 7a4 4 0 0 1-4 4H7V11Z"/></svg> Useful</button><button class="react-choice" type="button" onclick="pdxReact('like')">❤️ Like</button></div></div></div></div>
<div class="modal" id="commentReactorsModal" onclick="if(event.target===this)closeModal('commentReactorsModal')"><div class="modalbox"><div class="modal-head"><b id="reactorModalTitle">Comment reactions</b><button class="close" type="button" onclick="closeModal('commentReactorsModal')">&times;</button></div><div class="modal-body"><div class="reactor-list" id="reactorList"></div></div></div></div>
<div class="modal" id="reportModal" onclick="if(event.target===this)closeModal('reportModal')"><div class="modalbox"><div class="modal-head"><b>Report or moderate</b><button class="close" type="button" onclick="closeModal('reportModal')">&times;</button></div><div class="modal-body"><p style="font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:12px">Reports should create a moderation record with post ID, reporter ID, reason, evidence, and campus context.</p><div class="reason"><label><input type="radio" name="report_reason"> False or misleading campus update</label><label><input type="radio" name="report_reason"> Scam, unsafe meetup, or payment request</label><label><input type="radio" name="report_reason"> Harassment or abusive comment</label><label><input type="radio" name="report_reason"> Spam or unrelated promotion</label></div><button class="btn btn-pri" style="width:100%;margin-top:12px" type="button" onclick="closeModal('reportModal')">Submit report</button></div></div></div>

<div class="pg-lb" id="pdxLb" onclick="if(event.target===this)pdxLbClose()">
  <button type="button" class="pg-lb-x" onclick="pdxLbClose()" aria-label="Close">×</button>
  <button type="button" class="pg-lb-nav pg-lb-prev" onclick="pdxLbStep(-1)" aria-label="Previous">‹</button>
  <img id="pdxLbImg" src="" alt="">
  <button type="button" class="pg-lb-nav pg-lb-next" onclick="pdxLbStep(1)" aria-label="Next">›</button>
  <div class="pg-lb-count" id="pdxLbCount"></div>
</div>
<nav class="mobile-dock"><a href="https://beta.gojuju.ng/pulse"><b><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h5v-6h4v6h5V9.5"/></svg></b>Home</a><button onclick="focusReply()"><b><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a8 8 0 0 1-8 8H5l-2 2 1.4-5A8 8 0 1 1 21 12Z"/></svg></b>Reply</button><button onclick="openReactions()"><b><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><path d="M9 9h.01"/><path d="M15 9h.01"/></svg></b>React</button><button onclick="navigator.clipboard?.writeText(location.href)"><b><svg class="svg-icon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/><path d="M16 6l-4-4-4 4"/><path d="M12 2v14"/></svg></b>Share</button></nav>
</div><!-- /#pdx -->
<script>
window.PULSE_APP_URL = "https:\/\/beta.gojuju.ng";
window.PULSE_CSRF = "8b3cc4472c98f08935cdcd62911781de946dcb1d";
const POST_ID = 20;
const IS_AUTH = false;
function escapeHtml(s){return String(s??'').replace(/[&<>"']/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[m]));}
const AUTH_UID = null;
const POST_AUTHOR_ID = 7;
let commentCache=[];
let replyingTo=null;
function avatarFor(c){return c.avatar_url||('https://i.pravatar.cc/80?img='+(20+(Number(c.user_id||c.id||1)%40)));}
function nameFor(c){return ((c.first_name||'')+' '+(c.last_name||'')).trim()||c.username||'Student';}
function tinyTime(ts){if(!ts)return '';const d=new Date(String(ts).replace(' ','T'));if(Number.isNaN(d.getTime()))return ts;const diff=Math.max(0,(Date.now()-d.getTime())/1000);if(diff<60)return 'now';if(diff<3600)return Math.floor(diff/60)+'m';if(diff<86400)return Math.floor(diff/3600)+'h';if(diff<604800)return Math.floor(diff/86400)+'d';return d.toLocaleDateString();}
function reactorAvatars(list){return list.slice(0,3).map(r=>`<img src="${escapeHtml(r.avatar_url||('https://i.pravatar.cc/40?u='+Number(r.user_id||1)))}" alt="">`).join('');}
function commentHtml(c,depth=0){const name=nameFor(c);const isAuthor=Number(c.user_id)===Number(POST_AUTHOR_ID);const up=(c.reactors?.up||[]);const score=Number(c.vote_score||0);const myVote=Number(c.my_vote||0);const indent=depth>0?` style="margin-left:${Math.min(depth,4)*22}px"`:'';const reactorChip=score>0?`<span class="comment-reactors" onclick="openReactors(${Number(c.id)},'up')" title="See who reacted"><span class="react-avs">${reactorAvatars(up)}</span>👍 <b>${score}</b></span>`:'';return `<div class="comment ${depth>0?'is-reply':''}" data-comment-id="${Number(c.id)}"${indent}><img class="avatar" src="${escapeHtml(avatarFor(c))}" alt=""><div class="comment-body"><div class="comment-head"><span class="comment-name-row"><span class="comment-name">${escapeHtml(name)}</span>${isAuthor?'<span class="author-badge">Author</span>':''}<span class="verified">verified</span></span><span class="comment-time">${escapeHtml(tinyTime(c.created_at))}</span></div><div class="comment-text">${escapeHtml(c.body||c.comment||'')}</div><div class="comment-actions"><button type="button" class="c-like ${myVote>0?'is-on':''}" onclick="voteComment(${Number(c.id)},1,this)"><span class="c-ico">👍</span> ${myVote>0?'Liked':'Like'}</button><button type="button" onclick="setReply(${Number(c.id)},'${escapeHtml(name).replace(/'/g,'&#039;')}')">↩ Reply</button><button type="button" onclick="openCommentReport(${Number(c.id)})">Report</button>${reactorChip}</div></div></div>`;}
function renderCommentTree(){const box=document.getElementById('comments');if(!commentCache.length){box.innerHTML='<div class="empty-comments">No comments yet. Start the thread.</div>';return;}const byParent={};commentCache.forEach(c=>{const p=(c.parent_id!==null&&c.parent_id!==undefined&&String(c.parent_id)!=='0')?String(c.parent_id):'0';(byParent[p]=byParent[p]||[]).push(c);});const build=(pid,depth)=>(byParent[String(pid)]||[]).map(c=>commentHtml(c,depth)+build(c.id,depth+1)).join('');box.innerHTML=build('0',0)||'<div class="empty-comments">No comments yet. Start the thread.</div>';}
async function loadComments(){const box=document.getElementById('comments');box.innerHTML='<div class="empty-comments">Loading comments...</div>';try{const res=await fetch(`${window.PULSE_APP_URL}/pulse/${POST_ID}/comments-data`,{headers:{'X-Requested-With':'XMLHttpRequest'}});const data=await res.json();if(!res.ok)throw new Error(data.error||'Unable to load comments');commentCache=data.comments||[];document.getElementById('commentCount').textContent=Number(data.total||0).toLocaleString();renderCommentTree();}catch(e){box.innerHTML='<div class="empty-comments">'+escapeHtml(e.message||'Unable to load comments')+'</div>';}}
function setReply(id,name){if(!IS_AUTH){location.href='https://beta.gojuju.ng/login';return;}replyingTo={id,name};const input=document.getElementById('replyInput');const tools=document.querySelector('.reply-tools');document.querySelector('.replying-pill')?.remove();if(tools){tools.insertAdjacentHTML('beforebegin',`<div class="replying-pill">Replying to ${escapeHtml(name)} <button type="button" onclick="clearReply()">x</button></div>`);}input?.focus();}
function clearReply(){replyingTo=null;document.querySelector('.replying-pill')?.remove();}
async function addComment(){if(!IS_AUTH){location.href='https://beta.gojuju.ng/login';return;}const input=document.getElementById('replyInput');const text=input.value.trim();if(!text)return;const btn=document.querySelector('.reply-tools .btn');btn.disabled=true;try{const body=new URLSearchParams({_token:window.PULSE_CSRF,body:text});if(replyingTo?.id)body.set('parent_id',replyingTo.id);const res=await fetch(`${window.PULSE_APP_URL}/pulse/${POST_ID}/comment`,{method:'POST',headers:{'X-Requested-With':'XMLHttpRequest','Content-Type':'application/x-www-form-urlencoded'},body});const data=await res.json();if(!res.ok||data.error)throw new Error(data.error||'Reply failed');input.value='';clearReply();await loadComments();}catch(e){alert(e.message||'Reply failed');}finally{btn.disabled=false;}}
async function voteComment(commentId,vote,btn){if(!IS_AUTH){location.href='https://beta.gojuju.ng/login';return;}btn.disabled=true;try{const body=new URLSearchParams({_token:window.PULSE_CSRF,vote:String(vote)});const res=await fetch(`${window.PULSE_APP_URL}/pulse/comments/${commentId}/vote`,{method:'POST',headers:{'X-Requested-With':'XMLHttpRequest','Content-Type':'application/x-www-form-urlencoded'},body});const data=await res.json();if(!res.ok||data.error)throw new Error(data.error||'Could not react');const c=commentCache.find(x=>Number(x.id)===Number(commentId));if(c){c.vote_score=data.score;c.my_vote=data.my_vote;c.reactors=c.reactors||{up:[],down:[]};if(data.my_vote>0&&AUTH_UID){if(!c.reactors.up.some(r=>Number(r.user_id)===Number(AUTH_UID)))c.reactors.up.unshift({user_id:AUTH_UID,name:'You',avatar_url:null});}else{c.reactors.up=c.reactors.up.filter(r=>Number(r.user_id)!==Number(AUTH_UID));}}renderCommentTree();}catch(e){alert(e.message||'Could not react');}finally{btn.disabled=false;}}
function openReactors(commentId,type='up'){const c=commentCache.find(x=>Number(x.id)===Number(commentId));const rows=(c?.reactors?.[type]||[]);document.getElementById('reactorModalTitle').textContent=type==='up'?'People who liked this comment':'People who reacted';document.getElementById('reactorList').innerHTML=rows.length?rows.map(r=>`<div class="reactor-row"><img src="${escapeHtml(r.avatar_url||'https://i.pravatar.cc/80?img='+(20+(Number(r.user_id||1)%40)))}" alt=""><div><b>${escapeHtml(r.name||'Student')}</b><br><small>${escapeHtml(r.username?'@'+r.username:'Pulse user')}</small></div></div>`).join(''):'<div class="empty-comments">No visible reactors yet.</div>';openModal('commentReactorsModal');}
function openCommentReport(commentId){openReport();}
async function votePoll(btn,event){event?.preventDefault();event?.stopPropagation();const card=btn.closest('[data-poll-card]');if(!card||btn.disabled)return;if(!IS_AUTH){location.href='https://beta.gojuju.ng/login';return;}const err=card.querySelector('.poll-error');if(card.querySelector('.poll-option.on')&&!btn.classList.contains('on')){if(err){err.hidden=false;err.textContent='You have already voted on this poll.';}return;}const buttons=card.querySelectorAll('.poll-option');buttons.forEach(b=>b.disabled=true);btn.classList.add('is-voting');if(err){err.hidden=true;err.textContent='';}try{const body=new URLSearchParams({_token:window.PULSE_CSRF,option_id:btn.dataset.optionId});const res=await fetch(`${window.PULSE_APP_URL}/pulse/${POST_ID}/poll-vote`,{method:'POST',headers:{'X-Requested-With':'XMLHttpRequest','Content-Type':'application/x-www-form-urlencoded'},body});const data=await res.json();if(!res.ok||data.error)throw new Error(data.error||data.message||'Vote failed');const total=Number(data.total_votes||0);(data.options||[]).forEach(o=>{const ob=card.querySelector(`.poll-option[data-option-id="${o.id}"]`);if(!ob)return;ob.dataset.votes=Number(o.vote_count||0);ob.classList.toggle('on',String(o.id)===String(data.voted_option));if(card.dataset.showResults==='1'){const pct=total>0?Math.round((Number(o.vote_count||0)/total)*100):0;ob.querySelector('.poll-fill').style.width=pct+'%';ob.querySelector('b').textContent=pct+'%';}else{ob.querySelector('b').textContent=String(o.id)===String(data.voted_option)?'Voted':'Vote';}});const t=card.querySelector('[data-poll-total]');if(t)t.textContent=total.toLocaleString();}catch(e){if(err){err.hidden=false;err.textContent=e.message||'Vote failed';}else alert(e.message||'Vote failed');}finally{btn.classList.remove('is-voting');buttons.forEach(b=>b.disabled=false);}}
function showTrendPeriod(period,btn){document.querySelectorAll('[data-trend-panel]').forEach(p=>p.hidden=p.dataset.trendPanel!==period);document.querySelectorAll('.trend-tab').forEach(b=>b.classList.remove('on'));btn?.classList.add('on');}
function toggleAction(btn){btn.classList.toggle('on');}function openReactions(){document.getElementById('reactionModal')?.classList.add('show');}function openReport(){document.getElementById('reportModal')?.classList.add('show');}function openModal(id){document.getElementById(id)?.classList.add('show');}function closeModal(id){document.getElementById(id)?.classList.remove('show');}async function pdxReact(type){closeModal('reactionModal');if(!IS_AUTH){location.href='https://beta.gojuju.ng/login';return;}try{const res=await fetch(`${window.PULSE_APP_URL}/pulse/${POST_ID}/${type}`,{method:'POST',headers:{'X-Requested-With':'XMLHttpRequest','Accept':'application/json','Content-Type':'application/x-www-form-urlencoded'},body:new URLSearchParams({_token:window.PULSE_CSRF})});const d=await res.json();if(!res.ok||d.error)throw new Error(d.error||'Could not react');if(typeof peSyncReact==='function'){peSyncReact(POST_ID,{likeCount:(d.like_count??null),usefulCount:(d.useful_count??null),liked:d.liked,useful:d.marked});}}catch(e){}}
window.pdxReact=pdxReact;window.closeModal=window.closeModal||function(id){document.getElementById(id)?.classList.remove('show');};function focusReply(){document.getElementById('replyInput')?.focus();document.getElementById('replyBox')?.scrollIntoView({behavior:'smooth',block:'center'});}document.addEventListener('keydown',e=>{if(e.key==='Escape'){closeModal('reactionModal');closeModal('reportModal');closeModal('commentReactorsModal');}});
loadComments();
// ── Image lightbox ──
(function(){
  let urls=[], idx=0;
  const lb=document.getElementById('pdxLb'), img=document.getElementById('pdxLbImg'), cnt=document.getElementById('pdxLbCount');
  function show(){ img.src=urls[idx]||''; cnt.textContent=(idx+1)+' / '+urls.length; cnt.style.display=urls.length>1?'':'none'; document.querySelectorAll('#pdxLb .pg-lb-nav').forEach(n=>n.style.display=urls.length>1?'':'none'); }
  window.pdxLightbox=function(cell,e){ if(e){e.preventDefault();e.stopPropagation();} const box=cell.closest('[data-urls]'); try{urls=JSON.parse(box.getAttribute('data-urls'))||[];}catch(_){urls=[];} if(!urls.length)return; idx=Math.min(parseInt(cell.getAttribute('data-gi'),10)||0,urls.length-1); show(); lb.classList.add('show'); };
  window.pdxLbClose=function(){ lb.classList.remove('show'); img.src=''; };
  window.pdxLbStep=function(d){ if(!urls.length)return; idx=(idx+d+urls.length)%urls.length; show(); };
  document.addEventListener('keydown',e=>{ if(!lb.classList.contains('show'))return; if(e.key==='Escape')pdxLbClose(); else if(e.key==='ArrowLeft')pdxLbStep(-1); else if(e.key==='ArrowRight')pdxLbStep(1); });
})();
</script>
<script>
/* ── Pulse Unified Engagement JS — drives the .pe-bar partial ─────────────── */

const PE = (() => {
    const csrf = () =>
        (typeof CSRF !== 'undefined' && CSRF) ||
        (typeof EV_CSRF !== 'undefined' && EV_CSRF) ||
        (typeof PP_CSRF !== 'undefined' && PP_CSRF) ||
        document.querySelector('meta[name="csrf-token"]')?.content || '';
    const base = () =>
        (typeof BASE !== 'undefined' && BASE) ||
        (typeof EV_BASE !== 'undefined' && EV_BASE) ||
        (typeof PP_BASE !== 'undefined' && PP_BASE) ||
        (window.PULSE_APP_URL || '');
    const auth = () => typeof IS_AUTH === 'undefined' ? true : !!IS_AUTH;
    const fmt  = n => { n = parseInt(n) || 0; return n >= 1000 ? (Math.round(n/100)/10) + 'K' : (n ? String(n) : ''); };
    const post = (url, body = {}) => fetch(url, {
        method: 'POST',
        headers: {'X-Requested-With':'XMLHttpRequest','Content-Type':'application/x-www-form-urlencoded'},
        body: new URLSearchParams({...body, _token: csrf()}),
    }).then(r => r.ok ? r.json() : Promise.reject(r));
    const bar  = pid => document.querySelector(`.pe-bar[data-post-id="${pid}"]`);
    const setNum = (id, n) => { const el = document.getElementById(id); if (el) el.textContent = fmt(n); };
    const pulse = el => { if (!el) return; el.classList.remove('is-pulsing'); void el.offsetWidth; el.classList.add('is-pulsing'); };
    const toast = msg => (typeof window.toast === 'function' ? window.toast(msg) : null);
    const loginGate = () => {
        if (auth()) return false;
        if (typeof openLoginDrawer === 'function') openLoginDrawer();
        else window.location.href = base() + '/login';
        return true;
    };
    return { csrf, base, auth, fmt, post, bar, setNum, pulse, toast, loginGate };
})();

/* ── React popover (open/close on click; close on outside-click or Escape) ── */
function peToggleReact(el, e) {
    if (e?.target?.closest('.pe-popover')) return;  // ignore clicks inside the popover itself
    document.querySelectorAll('.pe-react.is-open').forEach(r => { if (r !== el) r.classList.remove('is-open'); });
    el.classList.toggle('is-open');
    if (e) e.stopPropagation();
}
document.addEventListener('click', e => {
    if (!e.target.closest('.pe-react')) {
        document.querySelectorAll('.pe-react.is-open').forEach(r => r.classList.remove('is-open'));
    }
});
document.addEventListener('keydown', e => {
    if (e.key === 'Escape') document.querySelectorAll('.pe-react.is-open').forEach(r => r.classList.remove('is-open'));
});

/* ── Reactions (like + useful) ───────────────────────────────────────────── */
async function peReact(postId, type, btn) {
    if (PE.loginGate()) return;
    const url = PE.base() + '/pulse/' + postId + '/' + type;          // /like or /useful
    try {
        const d = await PE.post(url);
        if (d.error) { PE.toast(d.error); return; }

        const likeCount    = d.like_count     ?? null;
        const usefulCount  = d.useful_count   ?? null;
        const liked   = (typeof d.liked  !== 'undefined') ? !!d.liked
                       : (type === 'like'   ? !btn.classList.contains('is-on') : null);
        const useful  = (typeof d.marked !== 'undefined') ? !!d.marked
                       : (type === 'useful' ? !btn.classList.contains('is-on') : null);

        peSyncReact(postId, { likeCount, usefulCount, liked, useful });
    } catch { PE.toast('Could not save your reaction'); }
}

function peSyncReact(pid, { likeCount, usefulCount, liked, useful }) {
    const bar = PE.bar(pid);
    if (!bar) return;
    const react = bar.querySelector('.pe-react');
    const popLike = bar.querySelector('.pe-pop-like');
    const popUse  = bar.querySelector('.pe-pop-useful');

    if (popLike && likeCount !== null) {
        const n = popLike.querySelector('.pe-pop-n');
        if (n) { n.textContent = PE.fmt(likeCount); n.dataset.count = likeCount; }
    }
    if (popUse && usefulCount !== null) {
        const n = popUse.querySelector('.pe-pop-n');
        if (n) { n.textContent = PE.fmt(usefulCount); n.dataset.count = usefulCount; }
    }
    // Resolve current my-state if the server didn't return it explicitly
    const isLike   = liked  ?? popLike?.classList.contains('is-on');
    const isUseful = useful ?? popUse?.classList.contains('is-on');
    popLike?.classList.toggle('is-on', !!isLike);
    popUse?.classList.toggle('is-on',  !!isUseful);

    // Total + dominant icon on the trigger
    const safeLike  = (likeCount   ?? parseInt(popLike?.querySelector('.pe-pop-n')?.dataset.count || 0)) || 0;
    const safeUse   = (usefulCount ?? parseInt(popUse?.querySelector('.pe-pop-n')?.dataset.count  || 0)) || 0;
    PE.setNum('pe-react-' + pid, safeLike + safeUse);
    if (react) {
        react.classList.toggle('is-active', !!isLike || !!isUseful);
        react.classList.toggle('is-like',   !!isLike  && !isUseful);
        react.classList.toggle('is-useful', !!isUseful);
        // Swap the displayed icon based on dominance
        const useUseful = isUseful || (!isLike && safeUse > safeLike);
        const ic = react.querySelector('.pe-ic');
        if (ic) {
            ic.innerHTML = useUseful
                ? '<path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14z"/><path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/>'
                : '<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>';
            if (isLike || isUseful) PE.pulse(ic);
        }
    }
    react?.classList.remove('is-open');
}

/* ── Save / bookmark ─────────────────────────────────────────────────────── */
async function peSave(postId, btn) {
    if (PE.loginGate()) return;
    try {
        const d = await PE.post(PE.base() + '/pulse/' + postId + '/save');
        if (d.error) { PE.toast(d.error); return; }
        if (d.saved != null) {
            btn.classList.toggle('is-active', !!d.saved);
            btn.setAttribute('aria-pressed', d.saved ? 'true' : 'false');
            if (d.save_count != null) PE.setNum('pe-sv-' + postId, d.save_count);
            if (d.saved) PE.pulse(btn.querySelector('.pe-ic'));
            PE.toast(d.saved ? 'Saved' : 'Removed');
        }
    } catch { PE.toast('Could not save'); }
}

/* ── Share — native API + clipboard fallback + server-side count ────────── */
async function peShare(postId, title, url) {
    const shareUrl   = url || window.location.href;
    const shareTitle = title || document.title;
    try {
        if (navigator.share) {
            await navigator.share({ title: shareTitle, url: shareUrl });
        } else {
            await navigator.clipboard.writeText(shareUrl);
            PE.toast('Link copied');
        }
    } catch { /* user cancelled or clipboard blocked — still count if successful */ }
    try {
        const d = await PE.post(PE.base() + '/pulse/' + postId + '/share');
        if (d.share_count != null) PE.setNum('pe-sh-' + postId, d.share_count);
    } catch {}
}

/* ── Back-compat shims for existing inline-onclick callers ───────────────── */
function toggleReactPopover(el, e) { peToggleReact(el, e); }
function toggleLike(el, postId)    { peReact(postId, 'like',   el); }
function toggleUseful(el, postId)  { peReact(postId, 'useful', el); }
function xdToggleSave(el, postId)  { peSave(postId, el); }
function shareNative(postId, title, url) { peShare(postId, title, url); }
</script>