/* Wrapper */
.sbb-comments{
  margin-top: var(--space-6);
  color: var(--text);
  font-family: var(--font);
}

/* Header divider */
.sbb-comments__head{
  border-bottom: 1px solid var(--rule);
  padding-bottom: 12px;
}

/* Nav buttons */
.sbb-cnav{
  border: 1px solid var(--room-border);
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  color: var(--text);
  box-shadow: none;
}

.sbb-cnav:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}

.sbb-cnav:disabled{
  opacity: .45;
}

/* separators / counter */
.sbb-comments__sep{
  background: var(--rule);
}
.sbb-comments__count{
  color: var(--muted);
}

/* Thread HUD pills */
.sbb-threadhud__pill{
  border: 1px solid var(--room-border);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
}
.sbb-threadhud__hint{
  color: var(--muted);
}

/* Viewer card */
.sbb-commentcard{
  border: 1px solid var(--room-border-soft);
  border-radius: 18px;
  background: var(--room-surface);
  box-shadow: var(--shadow);
  color: var(--text);
  backdrop-filter: blur(12px);
}

/* Card focus (match your accent) */
.sbb-commentcard:focus,
.sbb-commentcard:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(138,166,255,0.18),
    var(--shadow);
}

/* Author/meta */
.sbb-commentcard__author{
  font-weight: 650; /* match your vibe */
}
.sbb-commentcard__meta{
  opacity: 1;          /* avoid double-opacity stacking */
  color: var(--muted);
}

/* Tools links */
.sbb-commentcard__link{
  color: var(--muted);
  opacity: 1;
}
.sbb-commentcard__link:hover{
  color: var(--text);
}

/* Tools buttons (Reply / New take) */
.sbb-commentcard__tools button,
.sbb-commentcard__tools .sbb-commentcard__reply,
.sbb-commentcard__tools .sbb-commentcard__newtake{
  border: 1px solid var(--room-border);
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  color: var(--text);
  box-shadow: none;
}

.sbb-commentcard__tools button:hover,
.sbb-commentcard__tools .sbb-commentcard__reply:hover,
.sbb-commentcard__tools .sbb-commentcard__newtake:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.sbb-commentcard__tools button:focus-visible,
.sbb-commentcard__tools .sbb-commentcard__reply:focus-visible,
.sbb-commentcard__tools .sbb-commentcard__newtake:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(138,166,255,0.22);
}

/* Make "New take" subtly secondary (you already do this; we align the tone) */
.sbb-commentcard__newtake{
  opacity: .82;
}
.sbb-commentcard__newtake:hover{
  opacity: 1;
}

/* Context box (reply-to) */
.sbb-commentcard__context{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
}

.sbb-commentcard__contextline{
  color: var(--muted);
}
.sbb-commentcard__quote{
  color: var(--faint);
}

/* Body */
.sbb-commentcard__body{
  font-size: 16px;       /* a touch calmer than 15 on dark */
  line-height: 1.7;
  color: var(--text);
}

/* Paragraph spacing inside */
.sbb-commentcard__body p{
  margin: 0 0 var(--space-3);
}
.sbb-commentcard__body p:last-child{
  margin-bottom: 0;
}

/* Comment form block spacing */
.sbb-commentform{
  margin-top: var(--space-6);
}

/* If the WP comment form is used inside the viewer, make inputs match */
.sbb-comments textarea,
.sbb-comments input[type="text"],
.sbb-comments input[type="email"],
.sbb-comments input[type="url"]{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-family: var(--font);
}
.sbb-comments textarea:focus,
.sbb-comments input[type="text"]:focus,
.sbb-comments input[type="email"]:focus,
.sbb-comments input[type="url"]:focus{
  outline: none;
  border-color: rgba(138,166,255,0.55);
}

/* Submit button match */
.sbb-comments input[type="submit"],
.sbb-comments button[type="submit"]{
  border-radius: 12px;
  border: 1px solid rgba(138,166,255,0.55);
  background: rgba(138,166,255,0.12);
  color: var(--text);
  cursor: pointer;
}
.sbb-comments input[type="submit"]:hover,
.sbb-comments button[type="submit"]:hover{
  background: rgba(138,166,255,0.17);
}

/* Softer viewer header title (ex: "1 Comment") */
.sbb-comments__head h2,
.sbb-comments__head h3,
.sbb-comments__head .sbb-comments__title{
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}