/* ============================================================
   APOCALYPTIVERSE — COMMENTS / DISCUSSION COMPONENT
   Reusable, self-scoped under .apoc-comments. Loaded sitewide by
   site.js; self-activates on any [data-comments="<threadId>"] block.
   Matches the terminal aesthetic: near-black surface, teal + phosphor
   green accents, Chakra Petch display, IBM Plex Sans body. Each comment
   reads as a transmission in the city's log.
   ============================================================ */

.apoc-comments{
  --acc-teal:   #5eead4;
  --acc-green:  #6dffb0;
  --acc-amber:  #ffc60f;
  --c-bg:       #0b0b10;
  --c-panel:    #12131b;
  --c-line:     rgba(94,234,212,.14);
  --c-ink:      #e8ecf4;
  --c-muted:    #8b93a7;
  --c-alert:    #ff8a8a;

  display:block;
  margin:22px 0;
  padding:18px 16px 16px;
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:14px;
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  color:var(--c-ink);
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset, 0 18px 40px -28px rgba(94,234,212,.35);
}

/* ---- header ---- */
.apoc-c-head{
  display:flex; align-items:baseline; gap:10px;
  margin:0 2px 14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--c-line);
}
.apoc-c-eyebrow{
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-weight:700; font-size:.72rem;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--acc-teal);
}
.apoc-c-count{
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-weight:600; font-size:.72rem;
  color:var(--c-muted);
  padding:1px 8px; border-radius:999px;
  border:1px solid var(--c-line);
}
.apoc-c-count::before{ content:"▸ "; color:var(--acc-green); }

/* ---- list ---- */
.apoc-c-list{
  display:flex; flex-direction:column; gap:12px;
  max-height:min(56vh,520px); overflow:auto;
  padding-right:4px; margin-bottom:4px;
  scrollbar-width:thin; scrollbar-color:var(--c-line) transparent;
}
.apoc-c-list::-webkit-scrollbar{ width:8px; }
.apoc-c-list::-webkit-scrollbar-thumb{ background:var(--c-line); border-radius:8px; }

.apoc-c-item{ display:flex; gap:11px; align-items:flex-start; }
.apoc-c-av{
  width:34px; height:34px; flex:0 0 34px;
  border-radius:9px; object-fit:cover;
  border:1px solid var(--c-line);
  background:var(--c-panel);
}
.apoc-c-bubble{
  flex:1 1 auto; min-width:0;
  background:var(--c-panel);
  border:1px solid var(--c-line);
  border-radius:4px 12px 12px 12px;
  padding:8px 12px 10px;
}
.apoc-c-meta{
  display:flex; align-items:baseline; gap:8px;
  margin-bottom:3px; flex-wrap:wrap;
}
.apoc-c-who{
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-weight:700; font-size:.82rem;
  color:var(--acc-green);
  letter-spacing:.01em;
}
.apoc-c-when{
  font-size:.68rem; color:var(--c-muted);
  font-variant-numeric:tabular-nums;
}
.apoc-c-text{
  font-size:.92rem; line-height:1.5;
  color:var(--c-ink);
  overflow-wrap:anywhere; white-space:pre-wrap;
}
.apoc-c-text .apoc-c-tag{ color:var(--acc-teal); font-weight:600; }

/* ---- states ---- */
.apoc-c-state{
  padding:22px 8px; text-align:center;
  color:var(--c-muted); font-size:.9rem;
}
.apoc-c-state .apoc-c-glyph{
  display:block; font-size:1.5rem; margin-bottom:6px;
  color:var(--acc-teal); opacity:.8;
}
.apoc-c-state.is-error{ color:var(--c-alert); }

/* ---- composer ---- */
.apoc-c-compose{ margin-top:14px; padding-top:14px; border-top:1px solid var(--c-line); }
.apoc-c-me{
  display:flex; align-items:center; gap:9px; margin-bottom:8px;
}
.apoc-c-me img{
  width:26px; height:26px; border-radius:7px; object-fit:cover;
  border:1px solid var(--c-line); background:var(--c-panel);
}
.apoc-c-me span{
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:.78rem; font-weight:600; color:var(--acc-green);
}
.apoc-c-me small{ color:var(--c-muted); font-size:.68rem; font-weight:500; }

.apoc-c-input{
  width:100%; box-sizing:border-box;
  min-height:64px; max-height:180px; resize:vertical;
  background:var(--c-panel);
  border:1px solid var(--c-line); border-radius:10px;
  color:var(--c-ink);
  font-family:inherit; font-size:.92rem; line-height:1.5;
  padding:10px 12px;
  transition:border-color .15s, box-shadow .15s;
}
.apoc-c-input::placeholder{ color:var(--c-muted); }
.apoc-c-input:focus{
  outline:none;
  border-color:var(--acc-teal);
  box-shadow:0 0 0 3px rgba(94,234,212,.12);
}

.apoc-c-composebar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:9px;
}
.apoc-c-counter{
  font-size:.7rem; color:var(--c-muted);
  font-variant-numeric:tabular-nums;
}
.apoc-c-counter.is-warn{ color:var(--acc-amber); }
.apoc-c-send{
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-weight:700; font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-bg);
  background:var(--acc-green);
  border:none; border-radius:9px;
  padding:9px 18px; cursor:pointer;
  transition:filter .15s, transform .05s, opacity .15s;
}
.apoc-c-send:hover:not(:disabled){ filter:brightness(1.08); }
.apoc-c-send:active:not(:disabled){ transform:translateY(1px); }
.apoc-c-send:disabled{ opacity:.4; cursor:not-allowed; }

.apoc-c-note{
  margin-top:8px; font-size:.76rem; min-height:1em;
  color:var(--c-muted);
}
.apoc-c-note.is-ok{ color:var(--acc-green); }
.apoc-c-note.is-error{ color:var(--c-alert); }

/* ---- identity gate (no wallet) ---- */
.apoc-c-gate{
  margin-top:14px; padding:16px;
  text-align:center;
  background:var(--c-panel);
  border:1px dashed var(--c-line); border-radius:12px;
}
.apoc-c-gate p{ margin:0 0 10px; color:var(--c-muted); font-size:.9rem; }
.apoc-c-gate a{
  display:inline-block;
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-weight:700; font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--acc-teal); text-decoration:none;
  border:1px solid var(--acc-teal); border-radius:9px;
  padding:9px 18px;
  transition:background .15s, box-shadow .15s;
}
.apoc-c-gate a:hover{
  background:rgba(94,234,212,.1);
  box-shadow:0 0 18px rgba(94,234,212,.2);
}

/* ---- in-reader panel variant (overlay) ---- */
.rr-comment-panel{
  position:absolute; inset:auto 0 0 0;
  max-height:76%; overflow:auto;
  background:linear-gradient(180deg, rgba(11,11,16,.0), #0b0b10 12%);
  padding:8px 14px 20px;
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
  z-index:6;
}
.rr-comment-panel.open{ transform:translateY(0); }
.rr-comment-panel .apoc-comments{ margin:0; }
.rr-comment-close{
  position:sticky; top:0; margin-left:auto; display:block;
  background:var(--c-panel); color:var(--c-muted);
  border:1px solid var(--c-line); border-radius:8px;
  width:32px; height:32px; cursor:pointer; font-size:1rem;
}

/* ---- reusable discussion overlay (book cards, in-reader, game hub) ---- */
.apoc-discuss-overlay{
  position:fixed; inset:0; z-index:9000;
  display:none; align-items:flex-end; justify-content:center;
  background:rgba(4,5,9,.72);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.apoc-discuss-overlay.open{ display:flex; }
.apoc-discuss-sheet{
  width:min(680px,100%);
  max-height:88vh; display:flex; flex-direction:column;
  background:#0b0b10;
  border:1px solid rgba(94,234,212,.18);
  border-bottom:none;
  border-radius:16px 16px 0 0;
  box-shadow:0 -20px 60px -30px rgba(94,234,212,.5);
  animation:apocSheetUp .28s cubic-bezier(.22,1,.36,1);
}
@keyframes apocSheetUp{ from{ transform:translateY(14px); opacity:.6; } to{ transform:translateY(0); opacity:1; } }
.apoc-discuss-bar{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(94,234,212,.14);
}
.apoc-discuss-title{
  flex:1 1 auto; min-width:0;
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-weight:700; font-size:.95rem; color:#e8ecf4;
  letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.apoc-discuss-close{
  flex:0 0 auto;
  width:34px; height:34px; cursor:pointer;
  background:#12131b; color:#8b93a7;
  border:1px solid rgba(94,234,212,.14); border-radius:9px;
  font-size:1rem;
}
.apoc-discuss-close:hover{ color:#e8ecf4; }
.apoc-discuss-body{ overflow:auto; padding:4px 14px 16px; }
.apoc-discuss-body .apoc-comments{ margin:8px 0 0; border:none; box-shadow:none; padding:6px 2px; }

/* A ready-made trigger style, if you want the button to look native. */
.apoc-discuss-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:#5eead4; text-decoration:none; cursor:pointer;
  background:rgba(94,234,212,.06);
  border:1px solid rgba(94,234,212,.28); border-radius:9px;
  padding:9px 14px;
  transition:background .15s, box-shadow .15s;
}
.apoc-discuss-btn:hover{ background:rgba(94,234,212,.14); box-shadow:0 0 18px rgba(94,234,212,.18); }

@media (prefers-reduced-motion: reduce){
  .rr-comment-panel{ transition:none; }
  .apoc-discuss-sheet{ animation:none; }
}
@media (max-width:520px){
  .apoc-comments{ padding:14px 12px 12px; }
  .apoc-c-list{ max-height:min(60vh,460px); }
}