/* Reply block (flat) */
.reply-wrap{margin-top:28px} /* more space above Replies */
.reply-box{background:#0b0f12;border:1px solid #1f2a35;border-radius:10px;padding:12px;margin-top:8px}
.reply-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.reply-head .avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid #1f2a35}
.reply-head .who{font-size:.9rem;color:#dbe9ff}
.reply-box textarea{width:100%;min-height:120px;background:#0f141a;border:1px solid #2b3b4e;color:#e6f1ff;border-radius:10px;padding:10px}

.reply-item{display:flex;gap:10px;margin-top:14px}
.reply-avatar img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.reply-content{flex:1;background:#0f141a;border:1px solid #1f2a35;border-radius:10px;padding:10px;position:relative}
.reply-meta{font-size:.8rem;color:#9fb2c7;margin-bottom:6px}
.reply-body{white-space:pre-wrap;color:#e6f1ff}
.reply-actions{display:flex;gap:8px;margin-top:6px;align-items:center}
.r-votes{display:flex;gap:6px;margin-right:8px}
.r-votes .vote-chip{padding:2px 6px}
.r-votes .count{min-width:16px}
.r-votes .vote-chip.active{background:#263544;border-color:#4b6a86}

.quote{border-left:3px solid #33475a;background:#0b0f12;color:#cfe2ff;border-radius:6px;padding:8px 10px;margin:6px 0}
.quote a{color:#8fd3ff;text-decoration:none}

.btn{display:inline-flex;align-items:center;gap:.35rem;background:#1e2a35;color:#e6f1ff;border:1px solid #33475a;border-radius:8px;padding:6px 10px;text-decoration:none;font-weight:600;cursor:pointer}
.btn:hover{background:#263544}
.btn.err{background:#4a1d1d;border-color:#8b3b3b}
.btn.ok{background:#153e2b;border-color:#2f6e52}
.badge-admin{background:#2a3b55;border:1px solid #3f5f88;color:#dbe9ff;padding:2px 6px;border-radius:999px;font-size:.7rem;margin-left:6px}

.highlight-reply{box-shadow:0 0 0 2px #8fd3ff inset;border-color:#4a6b8c}

/* viewers modal */
.modal { display:none; position:fixed; z-index:20000; inset:0; background-color:rgba(0,0,0,.5) }
.modal-content { background:#0b0f12; color:#e6f1ff; margin:10% auto; padding:16px; border:1px solid #243142; width:min(680px,90vw); border-radius:10px }
.modal h3{margin:0 0 8px}
.modal .close{float:right;color:#9fb2c7;font-size:24px;cursor:pointer}
.viewer-pills{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.viewer-pill{display:inline-flex;align-items:center;gap:6px;background:#1e2a35;border:1px solid #33475a;border-radius:999px;padding:4px 10px;font-size:.85rem}

/* list view helpers */
.pager{display:flex;gap:8px;justify-content:center;margin:18px 0}
.pager a,.pager span{display:inline-block;background:#1e2a35;color:#e6f1ff;border:1px solid #33475a;border-radius:8px;padding:6px 10px;text-decoration:none}
.pager .current{opacity:.7;cursor:default}

/* --- Reply inputs: make textareas a bit narrower than the box --- */
.reply-box textarea,
.inline-reply-slot .ir-text {
  display: block;
  /* create small gutters inside the box (box has 12px padding already) */
  width: calc(100% - 24px);
  max-width: 100%;
  margin: 0 auto;            /* center it */
  box-sizing: border-box;     /* keep padding inside the calc width */
}

/* --- Mobile responsiveness for vote chips & top bar --- */
@media (max-width: 640px) {
  /* Stack the header rows on narrow screens so chips never spill */
  .news-topbar {
    grid-template-columns: 1fr;   /* title, stats, votes on separate rows */
    gap: 8px;
  }
  .view-stats { justify-self: start; }
  .post-votes {
    justify-self: start;          /* align to left under stats/title */
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .post-votes .vote-chip {
    /* allow each chip to wrap to the next line if space is tight */
    flex: 0 1 auto;
  }

  /* Per-reply actions: allow wrapping & vertical vote chips */
  .reply-actions {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .r-votes {
    display: flex;
    flex-direction: column;       /* stack 👎 above 👍 */
    align-items: flex-start;
    gap: 6px;
    margin-right: 0;              /* avoid pushing buttons off-screen */
  }
  .r-votes .vote-chip {
    /* prevent chips from growing too wide; keeps counts visible */
    flex: 0 0 auto;
  }
}
.view-stats{justify-self:center;display:flex;gap:8px;align-items:center;font-size:.9rem;color:#cfe2ff}
.view-stats .linklike{cursor:pointer;text-decoration:underline}

.post-votes{justify-self:end;display:flex;gap:6px}
.vote-chip{display:inline-flex;align-items:center;gap:6px;background:#1e2a35;color:#e6f1ff;border:1px solid #33475a;border-radius:999px;padding:4px 8px;font-weight:700}
.vote-chip button{background:transparent;border:none;color:inherit;cursor:pointer}
.vote-chip .count{display:inline-block;min-width:18px;text-align:center}
.vote-chip.active{background:#263544;border-color:#4b6a86}