/* ─── WRAPPER ─────────────────────────────────────────────── */
.rj-comments {
  max-width: 700px;
  margin: auto;
  padding: 24px;
  padding-bottom: 56px;
  font-family: inherit;
  color: #fff;
}

/* ─── POST BOX ───────────────────────────────────────────── */
.rj-post-box {
  background: transparent;
  padding: 0;
  margin-top: 24px;
  margin-bottom: 18px;
}

.rj-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.rj-title {
  font-size: 22px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .3px;
}

/* ─── COMPOSER (avatar + write box) ─────────────────────── */
.rj-composer-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.rj-composer-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #22252c;
  border: 1.5px solid rgba(255,255,255,.08);
  cursor: pointer;
  overflow: visible;
}

.rj-composer-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

.rj-composer-body { flex: 1; min-width: 0; }

/* ─── PROFILE DROPDOWN (tap avatar → logout) ────────────── */
.rj-profile-dropdown {
  position: absolute;
  top: 48px;
  left: 0;
  background: #20232b;
  border: 1px solid rgba(255,255,255,.09);
  display: none;
  min-width: 160px;
  z-index: 100;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}

.rj-profile-dropdown.show { display: block; animation: rj-fade-in .15s ease; }

.rj-profile-name {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rj-logout-btn {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  color: #ff6a6a;
  transition: background .15s;
}

.rj-logout-btn:hover { background: rgba(212,0,0,.14); }

/* ─── LOGIN BUTTON ───────────────────────────────────────── */
.rj-login-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #15171c;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 8px 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s;
}

.rj-login-btn:hover {
  background: #1a1d24;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}

.rj-login-btn img { width: 20px; height: 20px; display: block; flex-shrink: 0; }
.rj-login-btn span { font-size: 14px; font-weight: 600; font-family: inherit; line-height: 1; }

/* ─── TEXTAREA ───────────────────────────────────────────── */
.rj-textarea {
  width: 100%;
  height: 110px;
  background: #111318;
  border: 1px solid rgba(255,255,255,.07);
  outline: none;
  resize: none;
  padding: 14px;
  color: #fff;
  font-size: 14px;
  border-radius: 14px;
  transition: border-color .2s, box-shadow .2s;
  font-family: inherit;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.rj-textarea:focus {
  border-color: #d40000;
  box-shadow: 0 0 0 3px rgba(212,0,0,.12);
}

.rj-textarea::placeholder { color: rgba(255,255,255,.3); }

/* ─── POST BUTTON ────────────────────────────────────────── */
.rj-post-btn {
  background: #d40000;
  border: none;
  color: #fff;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity .2s, transform .1s, box-shadow .2s;
  font-family: inherit;
  letter-spacing: .3px;
}

.rj-post-btn:hover { opacity: .92; box-shadow: 0 4px 14px rgba(212,0,0,.35); }
.rj-post-btn:active { transform: scale(.97); }

/* ─── COMMENT ROW ──────────────── */
.rj-comment {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  animation: rj-fade-in .25s ease both;
}

.rj-comment .rj-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255,255,255,.1);
  flex-shrink: 0;
  margin-top: 2px;
}

.rj-comment .rj-avatar.rj-avatar-reply {
  width: 30px;
  height: 30px;
}

.rj-comment-main {
  flex: 1;
  min-width: 0;
}

/* ─── BUBBLE ─────────────────────────────────────────────── */
.rj-bubble {
  position: relative;
  background: #1c1f26;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 10px 40px 10px 14px;
  transition: background .2s, border-color .2s;
}

.rj-comment:hover > .rj-comment-main > .rj-bubble {
  border-color: rgba(255,255,255,.12);
}

.rj-depth-1 > .rj-comment-main > .rj-bubble,
.rj-depth-2 > .rj-comment-main > .rj-bubble {
  background: #181b21;
}

.rj-reply-to-tag {
  font-size: 11px;
  opacity: .65;
  margin-bottom: 3px;
  color: #ff8a8a;
}

.rj-reply-to-tag b { opacity: 1; font-weight: 700; }

.rj-bubble-name {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
  color: #fff;
}

/* ─── STAFF HIGHLIGHT ────────────────────────────────────── */
.rj-staff-name {
  color: #f5a623;
  font-weight: 800;
}

.rj-staff-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f5a623;
  margin-left: 5px;
  vertical-align: middle;
}

.rj-bubble-body { font-size: 14px; line-height: 1.6; }

.rj-text {
  color: rgba(255,255,255,.9);
  word-break: break-word;
  white-space: pre-wrap;
}

.rj-edited-tag { opacity: .5; font-size: 12px; }

/* ─── META ROW  ─────── */
.rj-meta-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding-left: 14px;
  font-size: 12px;
  flex-wrap: wrap;
}

.rj-time-text { opacity: .5; margin-right: 2px; }
.rj-dot { opacity: .35; margin: 0 2px; }

.rj-action {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  opacity: .85;
  cursor: pointer;
  user-select: none;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}

.rj-action:hover {
  background: rgba(212,0,0,.16);
  border-color: rgba(212,0,0,.3);
  color: #ff6a6a;
}

.rj-like-btn { display: inline-flex; align-items: center; gap: 5px; }
.rj-like-btn.liked { background: rgba(212,0,0,.16); color: #ff6a6a; }

/* ─── MENU  ──────────────────────────── */
.rj-menu { position: absolute; top: 6px; right: 6px; }

.rj-menu-btn {
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  opacity: .45;
  line-height: 1;
  border-radius: 4px;
  transition: opacity .15s, background .15s;
}

.rj-menu-btn:hover { opacity: 1; background: rgba(255,255,255,.08); }

.rj-menu-dropdown {
  position: absolute;
  right: 0;
  top: 26px;
  background: #20232b;
  border: 1px solid rgba(255,255,255,.09);
  display: none;
  min-width: 120px;
  z-index: 100;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}

.rj-menu-dropdown.show { display: block; animation: rj-fade-in .15s ease; }

.rj-menu-dropdown div {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  transition: background .15s, color .15s;
}

.rj-menu-dropdown div:hover { background: rgba(212,0,0,.14); color: #ff6060; }

/* ─── EDIT BOX ───────────────────────────────────────────── */
.rj-edit-box { margin-top: 6px; }
.rj-edit-box .rj-textarea { height: 70px; }

/* ─── REPLY BOX ──────────────────────────────────────────── */
.rj-reply-box { margin-top: 10px; }
.rj-reply-box .rj-textarea { height: 70px; }

/* ─── REPLIES CONTAINER ──────────────────────────────────── */
/* All descendants of a root comment (replies, replies-to-replies, etc.)
   are flattened into ONE level in comments.js, so this container never
   nests more than once and never compounds indentation. */
.rj-replies { margin-top: 10px; }

/* ─── SKELETON LOADER ────────────────────────────────────── */
@keyframes rj-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.rj-skeleton-card {
  display: flex;
  gap: 10px;
  padding: 0;
  margin-bottom: 14px;
}

.rj-skel {
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 100%);
  background-size: 600px 100%;
  animation: rj-shimmer 1.6s infinite linear;
}

.rj-skel-user { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.rj-skel-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.rj-skel-bubble { border-radius: 18px; padding: 12px 14px; background: #181b21; }
.rj-skel-name  { width: 100px; height: 10px; border-radius: 4px; margin-bottom: 8px; }
.rj-skel-time  { width: 70px;  height: 8px;  border-radius: 4px; }
.rj-skel-line  { height: 10px; border-radius: 4px; margin-bottom: 6px; }
.rj-skel-line.long  { width: 100%; }
.rj-skel-line.med   { width: 78%; }
.rj-skel-line.short { width: 54%; margin-bottom: 0; }
.rj-skel-actions { display: flex; gap: 8px; margin-top: 8px; padding-left: 14px; }
.rj-skel-action { width: 44px; height: 18px; border-radius: 999px; }

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@keyframes rj-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .rj-comments { padding: 15px; }
  .rj-title    { font-size: 20px; }
  .rj-textarea { height: 100px; }
  .rj-post-btn { padding: 9px 20px; }
  .rj-bubble   { padding: 9px 34px 9px 12px; }
}

/* ————————— Comment Img/Spoiler ————— */
.rj-post-controls { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.rj-post-controls-left { display:flex; align-items:center; gap:4px; }

.rj-image-btn, .rj-spoiler-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #e8e8e8;
  opacity: .55;
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s, color .15s, background .15s;
}
.rj-image-btn:hover, .rj-spoiler-btn:hover { opacity: 1; background: rgba(255,255,255,.08); }
.rj-image-btn:disabled { opacity: .25; cursor: default; }
.rj-spoiler-btn.active { opacity: 1; color: #c8102e; background: rgba(200,16,46,.12); }

.rj-image-preview { position:relative; display:flex; margin-top:8px; }
.rj-image-preview img { max-height:120px; border-radius:12px; object-fit:cover; }
.rj-image-remove { position:absolute; top:-6px; right:-6px; background:#000; color:#fff; border:none; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; cursor:pointer; }

.rj-comment-image { margin-top:8px; }
.rj-comment-image img { max-width:100%; max-height:320px; border-radius:12px; object-fit:cover; cursor:pointer; display:block; }

.rj-spoiler-wrap { position:relative; margin-top:2px; }
.rj-spoiler-wrap .rj-spoiler-content { filter:blur(14px); user-select:none; pointer-events:none; transition:filter .2s; }
.rj-spoiler-wrap.revealed .rj-spoiler-content { filter:none; user-select:auto; pointer-events:auto; }
.rj-spoiler-wrap.revealed .rj-spoiler-overlay { display:none; }
.rj-spoiler-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(0,0,0,.6); color:#fff; font-size:13px; font-weight:500;
  border-radius:12px; cursor:pointer; z-index:2;
}