@import url('/performance.css');

/* Comment readability: follow the active seasonal surface and keep comment text readable. */
.comment,
.comment-item,
.comment-card,
.comment-text,
.comments { color: var(--season-text, #111111) !important; }

.comment p,
.comment-item p,
.comment-card p,
.comment-text,
.comments p,
.comment-item *,
.comment-card *,
.comments * { color: inherit !important; }

.comment textarea,
.comment-item textarea,
.comment-card textarea,
.comments textarea,
.comment input,
.comment-item input,
.comment-card input,
.comments input { color: var(--season-text, #111111) !important; background: var(--season-surface, #fffefa) !important; border-color: var(--season-border, #deddd6) !important; }

.comment textarea::placeholder,
.comment-item textarea::placeholder,
.comment-card textarea::placeholder,
.comments textarea::placeholder,
.comment input::placeholder,
.comment-item input::placeholder,
.comment-card input::placeholder,
.comments input::placeholder { color: color-mix(in srgb, var(--season-text, #111111) 58%, transparent) !important; }

html[data-season="autumn"] .comment,
html[data-season="autumn"] .comment-item,
html[data-season="autumn"] .comment-card,
html[data-season="autumn"] .comment-text,
html[data-season="autumn"] .comments,
html[data-season="autumn"] .comment p,
html[data-season="autumn"] .comment-item p,
html[data-season="autumn"] .comment-card p,
html[data-season="autumn"] .comments p,
html[data-season="autumn"] .comment-item *,
html[data-season="autumn"] .comment-card *,
html[data-season="autumn"] .comments * { color: #F8F8FF !important; }

html[data-season="winter"] .comment,
html[data-season="winter"] .comment-item,
html[data-season="winter"] .comment-card,
html[data-season="winter"] .comment-text,
html[data-season="winter"] .comments,
html[data-season="winter"] .comment p,
html[data-season="winter"] .comment-item p,
html[data-season="winter"] .comment-card p,
html[data-season="winter"] .comments p,
html[data-season="winter"] .comment-item *,
html[data-season="winter"] .comment-card *,
html[data-season="winter"] .comments * { color: #000000 !important; }

html[data-season="autumn"] .comment textarea,
html[data-season="autumn"] .comment-item textarea,
html[data-season="autumn"] .comment-card textarea,
html[data-season="autumn"] .comments textarea,
html[data-season="autumn"] .comment input,
html[data-season="autumn"] .comment-item input,
html[data-season="autumn"] .comment-card input,
html[data-season="autumn"] .comments input { color: #F8F8FF !important; background: #111111 !important; border-color: #2b2b2b !important; }

html[data-season="winter"] .comment textarea,
html[data-season="winter"] .comment-item textarea,
html[data-season="winter"] .comment-card textarea,
html[data-season="winter"] .comments textarea,
html[data-season="winter"] .comment input,
html[data-season="winter"] .comment-item input,
html[data-season="winter"] .comment-card input,
html[data-season="winter"] .comments input { color: #000000 !important; background: #ffffff !important; border-color: #000000 !important; }

/* Main comment composer publishes a new comment; replying is a separate Reply control. */
.comment-form button[type="submit"] {
  font-size: 0 !important;
  min-width: 76px;
}
.comment-form button[type="submit"]::after {
  content: 'Publish';
  font-size: 12px;
  font-weight: 700;
}

/* Reply is a text control, not a colored button. */
.reply-link {
  display: inline !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none !important;
  cursor: pointer;
}
.reply-link:hover,
.reply-link:focus-visible { background: transparent !important; color: currentColor !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* Guests can read and write where permitted, but following requires a claimed username. */
html[data-ambobs-claimed="false"] .post-follow,
html[data-ambobs-claimed="false"] .profile-follow,
html[data-ambobs-claimed="false"] .follow-button {
  opacity: .55 !important;
  cursor: not-allowed !important;
}

/* Inline nested replies. Depth is calculated from each comment's parentCommentId. */
.comment {
  margin-left: calc(min(var(--comment-depth, 0), 8) * 24px) !important;
  transition: margin-left .12s ease;
}
.subcomment-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.subcomment-reply {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}
.subcomment-reply:hover,
.subcomment-reply:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.subcomment-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 280px;
  margin-top: 7px;
}
.subcomment-form input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 34px;
}
.subcomment-form button {
  appearance: none;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: currentColor;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.subcomment-form button:disabled { opacity: .55; cursor: wait; }
.subcomment-error {
  flex-basis: 100%;
  font-size: 11px;
  opacity: .78;
}


/* Comment composer: dark field with legible light input text. */
.comments .comment-form input,
.comments .subcomment-form input,
.comments .comment-edit-form input,
.comments .comment-edit-form textarea,
.comments .comment-body textarea {
  background: #000 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  border: 1px solid #444 !important;
}
.comments .comment-form input::placeholder,
.comments .subcomment-form input::placeholder,
.comments .comment-edit-form input::placeholder {
  color: #bbb !important;
  -webkit-text-fill-color: #bbb !important;
  opacity: 1;
}
/* Keep comment identity and moderation controls black, independent of theme. */
.comments .comment-author,
.comments .comment-actions,
.comments .comment-actions button,
.comments .comment-body .small-button,
.comments .comment-item .comment-author,
.comments .comment-item .comment-actions button {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}
.comments .comment-actions button svg { color: #000 !important; stroke: #000 !important; }


/* Comment action polish. */
.comments .comment-form .comment-publish-button {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}
.comments .comment-heart,
.comments .comment-heart span,
.comments .comment-heart svg {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  stroke: #000 !important;
}
.comments .comment-heart.liked svg { fill: #000 !important; }
.comments .comment-heart {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}