/* assets/comments.css
   Neon-ish comment styling + icon buttons + reactions + threaded replies
   Works with includes/comment_section.php (no HTML changes needed)
*/

/* -------- Tokens (fallbacks if globals aren't present) -------- */
:root{
  --co-ink: var(--ink, #e8eef7);
  --co-muted: #9fb0c5;
  --co-line: rgba(120,150,185,.22);
  --co-bg: rgba(10,16,24,.72);
  --co-soft: rgba(13,20,30,.9);
  --co-accent: var(--cine-primary, #00e5ff);
  --co-accent-2: #9e30a9;
  --co-danger: #ff6b6b;
}

/* Wrapper box already has .dv-box; just polish spacing */
.comment-section{ padding:12px; border:1px solid var(--co-line); border-radius:10px; background:var(--co-bg); }
.comment-section > h3{ margin:0 0 10px; color:#bcd9ff; letter-spacing:.02em; }

/* ---------- List + items ---------- */
.c-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.c-list > li{
  border:1px solid var(--co-line);
  border-radius:10px;
  padding:10px 12px;
  background:var(--co-soft);
}

/* highlighted when unresolved flags exist (from PHP) */
.comment-flagged{ box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--co-danger) 45%, transparent); }

/* ---------- Header line (author + time + role badge) ---------- */
.comment-author{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:700; color:var(--co-ink);
}
.comment-author a{ color:inherit; text-decoration:none; }
.comment-author a:hover{ text-decoration:underline; }

.comment-author.is-admin{ color:#ff8a8a; }
.comment-author.is-mod  { color:#85f0a9; }

/* small role icon uses inline --icon url from PHP */
.role-icon{
  width:16px; height:16px; display:inline-block;
  background: currentColor;
  -webkit-mask: var(--icon) no-repeat center/contain;
          mask: var(--icon) no-repeat center/contain;
}

.c-list small{
  color:var(--co-muted);
}

/* ---------- Body (markdown) ---------- */
.c-body{ margin-top:6px; color:var(--co-ink); line-height:1.5; }
.c-body p{ margin:.4rem 0; }
.c-body a{ color:#7bd0ff; }
.c-body code{
  padding:0 .25rem; border:1px solid var(--co-line);
  border-radius:6px; background:rgba(12,18,28,.8);
}
.c-body pre{
  margin:.5rem 0; padding:.6rem .7rem;
  border:1px solid var(--co-line); border-radius:10px;
  background:rgba(8,12,20,.9);
  overflow:auto; max-width:100%;
}

/* ---------- Action row (reply / edit / delete / flag) ---------- */
.c-actions,
.c-reacts{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:8px; margin-top:8px;
}

/* icon-only buttons (reply/edit/delete/flag) */
.icon-btn{
  display:inline-grid; place-items:center;
  width:34px; height:30px; padding:0;
  border:1px solid var(--co-line);
  border-radius:8px; cursor:pointer;
  background:rgba(7,12,20,.8); color:#8fd7ff;
  transition: filter .15s, border-color .15s, background .15s;
}
.icon-btn .ic{
  width:18px; height:18px; background:currentColor;
  -webkit-mask: var(--icon) no-repeat center/contain;
          mask: var(--icon) no-repeat center/contain;
}
.icon-btn:hover{
  border-color: color-mix(in srgb, var(--co-accent) 50%, var(--co-line));
  background: rgba(8,14,24,.95);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--co-accent) 25%, transparent));
}
.icon-btn.btn-danger{ color: var(--co-danger); }
.icon-btn.btn-danger:hover{ border-color: color-mix(in srgb, var(--co-danger) 55%, var(--co-line)); }

/* ---------- Reactions (chips + palette) ---------- */
.c-reacts{ position:relative; }

.rx-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; border:1px solid var(--co-line);
  background:rgba(9,14,22,.9); color:var(--co-ink);
  font-size:14px; line-height:1; cursor:pointer;
  transition: transform .08s ease, border-color .15s;
}
.rx-btn:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--co-accent) 50%, var(--co-line)); }
.rx-btn[aria-pressed="true"]{
  background: radial-gradient(120% 120% at 0% 0%, rgba(0,229,255,.18), transparent 60%),
              rgba(10,16,24,.92);
  box-shadow: 0 0 12px rgba(0,229,255,.15) inset;
  border-color: color-mix(in srgb, var(--co-accent) 60%, var(--co-line));
}
.rx-emoji{ font-size:18px; line-height:1; filter: drop-shadow(0 0 2px rgba(0,0,0,.25)); }
.rx-count{ font-weight:700; color:#cfe4ff; }

/* (+) add button uses the same icon-btn base for consistency */
.rx-add.icon-btn{ width:34px; height:30px; }

/* picker palette */
.rx-palette{
  position:absolute; inset:auto auto auto 0; top:calc(100% + 8px);
  display:flex; flex-wrap:wrap; gap:6px;
  padding:8px; min-width:200px; border-radius:10px;
  background:rgba(7,12,20,.98);
  border:1px solid var(--co-line);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  z-index:10;
}
.rx-palette[hidden]{ display:none !important; }
.rx-palette .rx-pick{
  padding:6px 10px; border-radius:8px; border:1px solid var(--co-line);
  background:rgba(9,14,22,.95); cursor:pointer;
}
.rx-palette .rx-pick:hover{ border-color: color-mix(in srgb, var(--co-accent) 50%, var(--co-line)); }

/* ---------- Deleted state helpers ---------- */
.c-danger-actions{ display:flex; gap:8px; margin-top:6px; }

/* ---------- Replies (thread lines) ---------- */
.c-replies{
  list-style:none; margin:.5rem 0 .2rem 16px; padding-left:12px;
  border-left:2px solid var(--co-line);
}
.c-replies > li{ margin:.4rem 0; }
.c-replies .c-replies{ margin-left:0; padding-left:0; border-left:0; }

/* small horizontal connector for first child */
.c-replies > li{ position:relative; }
.c-replies > li::before{
  content:""; position:absolute; left:-12px; top:16px; width:10px; height:2px;
  background:var(--co-line); border-radius:1px;
}

/* ---------- Inline editors / reply boxes ---------- */
.comment-section textarea{
  width:100%; max-width:100%; min-height:120px;
  padding:8px 10px; border-radius:8px;
  background:rgba(9,14,22,.95); color:var(--co-ink);
  border:1px solid var(--co-line);
}
.comment-section label{ display:block; font-weight:600; color:#c6dbff; margin-bottom:6px; }

/* The mini Markdown toolbar that the JS inserts */
.comment-section [role="toolbar"]{
  display:flex; flex-wrap:wrap; gap:6px;
  margin:.35rem 0 .25rem;
}
.comment-section [role="toolbar"] button{
  padding:4px 8px; border-radius:8px; border:1px solid var(--co-line);
  background:rgba(8,14,24,.9); color:var(--co-ink); cursor:pointer;
}
.comment-section [role="toolbar"] button:hover{
  border-color: color-mix(in srgb, var(--co-accent) 40%, var(--co-line));
}

/* Final “new comment” form box inside .comment-section */
.comment-form{ margin-top:12px; padding:12px; border:1px dashed var(--co-line); border-radius:10px; }
.comment-form .btn-primary{ background:#20c8ff; border-color:#20c8ff; color:#00141f; }
.comment-form .btn-primary:hover{ filter:brightness(.95); }

/* ---------- Flash stack inside the section (success/error) ---------- */
.flash-stack{ display:grid; gap:8px; }
.flash{ border-radius:10px; }

/* ---------- Anchor helper so PRG scroll lands correctly ---------- */
.c-anchor{ position:relative; top:-76px; display:block; height:0; }

/* ---------- Responsive ---------- */
@media (max-width:700px){
  .c-list > li{ padding:10px; }
  .rx-btn{ padding:4px 8px; }
  .comment-section textarea{ min-height:100px; }
}

/* Reaction hover tooltip */
.rx-tip{
  position: fixed;
  z-index: 4000;
  max-width: min(320px, 92vw);
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(10,16,28,.96);
  border: 1px solid rgba(120,150,185,.35);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  color: #eaf3ff;
  font-size: .92rem;
  line-height: 1.35;
  pointer-events: none;        /* don’t steal hover */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
}
.rx-tip.show{ opacity:1; transform: translateY(0); }
.rx-tip .rx-tip-emoji{ font-size: 18px; display:inline-block; margin-right: 8px; vertical-align: -2px; }
.rx-tip .rx-tip-text{ display:inline; white-space: normal; }