/*
================================================================================
SILVERPAUL FORUM - COMMENT SYSTEM MODULE
================================================================================
This module contains all comment-related styling including comment forms,
comment display, comment threading, and mobile responsive comment styles.
Extracted from base.css on July 24, 2025
Load Order: After base-styles.css, before forms.css
================================================================================
*/

/* ==========================================================================
   COMMENT SYSTEM
   ========================================================================== */

.add_comment {
  padding-bottom: var(--space-5);
  /* Use natural block width to match article section (100% of main-content) */
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

.add_comment h3 {
  line-height: 1.4;
  margin: 0;
  padding: var(--space-4);
  background-color: var(--comment-header-bg);
  border: var(--space-px) solid var(--comment-header-border);
  border-radius: var(--radius-lg);
  word-wrap: break-word;
}
.comment {
  font-family: var(--font-family-primary);
  font-size: var(--text-base);
  color: var(--primary-blue);
  background-color: var(--silver);
  border: solid var(--primary-blue);
  border-width: var(--space-px) var(--space-0-5) var(--space-1) var(--space-1);
  border-radius: var(--space-5); 
  padding: var(--space-2-5);
  width: 88%;
}
.comment_reply {
  display: block;
  font-family: var(--font-family-primary);
  font-size: var(--text-base);
  color: var(--primary-blue);
  border: solid var(--primary-blue);
  border-width: var(--space-0) var(--space-0-5) var(--space-1) var(--space-1);
  border-radius: var(--space-5); 
  background-color: var(--comment-reply-bg);
  padding: var(--space-2-5);
  position: relative;
  left: var(--space-10);
  width: 82%;
}
.parent_comment {
  font-family: var(--font-family-primary);
  font-size: var(--text-base);
  color: var(--primary-blue);
  background-color: var(--silver);
  border: solid var(--primary-blue);
  border-width: var(--space-px) var(--space-0-5) var(--space-1) var(--space-1);
  border-radius: var(--space-5); 
  padding: var(--space-2-5);
  width: 88%;
}

/* ==========================================================================
   HIERARCHICAL COMMENT SYSTEM
   ========================================================================== */

/* Modern hierarchical comment structure */
.comment[data-comment-id] {
  /* Override legacy comment styling for new hierarchical system */
  background: var(--white-bg);
  border: var(--space-px) solid var(--comment-header-border);
  border-radius: var(--radius-lg);
  padding: var(--space-component-md);
  margin-bottom: 0; /* Comments should touch each other */
  width: 100%;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Add spacing only between root-level comments */
.comment[data-comment-id][data-level="0"] {
  margin-bottom: var(--space-component-md);
}

/* Ensure child comments have no bottom margin */
.comment-children .comment[data-comment-id] {
  margin-bottom: 0;
}

/* Comment expansion highlighting based on user tier */
.comment[data-comment-id].comment-expanded-premium {
  background: linear-gradient(135deg, var(--premium-gold) 0%, #ffed4e 100%);
  border: var(--space-0-5) solid var(--premium-gold) !important;
  box-shadow: 0 var(--space-component-xs) var(--space-3) rgba(212, 160, 23, 0.25);
}

.comment[data-comment-id].comment-expanded-freemium {
  background: linear-gradient(135deg, var(--bg-light) 0%, #d1ecf1 100%);
  border: var(--space-0-5) solid var(--silver) !important;
  box-shadow: 0 var(--space-component-xs) var(--space-3) rgba(59, 130, 246, 0.15);
}

/* Comment header layout */
.comment-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* Avatar styling */
.comment-avatar {
  flex-shrink: 0;
}

.comment-avatar a {
  display: block;
  text-decoration: none;
}

.avatar-thumbnail {
  width: var(--space-10);
  height: var(--space-10);
  border-radius: 50%;
  object-fit: cover;
  border: var(--space-0-5) solid var(--comment-header-border);
  transition: border-color 0.2s ease;
}

.avatar-thumbnail:hover {
  border-color: var(--primary-blue);
}

/* Comment meta information */
.comment-meta {
  flex: 1;
  min-width: 0; /* Allow text truncation */
}

.comment-meta-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.comment-username {
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  color: var(--primary-blue);
}

.username-premium {
  color: var(--premium-gold);
  font-weight: var(--font-weight-bold);
}

.username-freemium {
  color: var(--primary-blue);
}

.comment-timestamp {
  color: var(--text-grey);
  font-size: var(--text-sm);
}

.comment-delete-btn {
  background: none;
  border: none;
  color: var(--text-grey);
  cursor: pointer;
  font-size: var(--text-lg);
  padding: var(--space-1);
  margin-left: auto;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.comment-delete-btn:hover {
  color: var(--primary-red);
  background: rgba(162, 28, 36, 0.1);
}

/* Reply-to styling */
.comment-reply-to {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-grey);
}

.reply-label {
  color: var(--text-grey);
}

.reply-username {
  color: var(--primary-red);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.reply-username:hover {
  text-decoration: underline;
}

/* Comment content */
.comment-content {
  margin-bottom: var(--space-3);
  line-height: var(--leading-body);
  color: var(--black-text);
}

.comment-expandable {
  cursor: pointer;
}

/* Removed hover background effect - cursor pointer is sufficient */

/* Comment actions */
.comment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.comment-reply-btn,
.comment-like-btn,
.comment-dislike-btn {
  background: none;
  border: none;
  color: var(--text-grey);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  transition: all 0.2s ease;
  text-decoration: none;
}

.comment-reply-btn:hover {
  color: var(--primary-blue);
  background: rgba(59, 130, 246, 0.1);
}

.comment-like-btn:hover {
  color: var(--primary-green);
  background: rgba(41, 123, 77, 0.1);
}

.comment-dislike-btn:hover {
  color: var(--primary-red);
  background: rgba(162, 28, 36, 0.1);
}

.comment-like-btn.liked {
  color: var(--primary-red);
  background: none;
}

.comment-dislike-btn.disliked {
  color: var(--primary-red);
  background: none;
}

.comment-like-btn.loading,
.comment-dislike-btn.loading {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Icon styling */
.icon-reply,
.icon-heart,
.icon-dislike {
  width: var(--space-4);
  height: var(--space-4);
  flex-shrink: 0;
}

/* Count styling */
.like-count,
.dislike-count,
.reply-count {
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);
}

/* Children container for hierarchical nesting */
.comment-children {
  margin-top: 0; /* Remove top margin - comments should touch */
  margin-bottom: 0; /* Remove bottom margin */
  padding-left: 0; /* Remove left padding */
  border-left: none; /* Remove left border */
  position: relative;
}

/* Remove the gradient line decoration */
.comment-children::before {
  display: none;
}

/* Nested comment styling - keep same width as parent */
.comment-children .comment[data-comment-id] {
  width: 100%; /* Full width like parent */
  margin-left: 0; /* No left margin */
  padding-left: var(--space-component-md); /* Same padding as parent */
  margin-bottom: 0; /* Remove spacing between comments */
  border-left: var(--space-1) solid var(--primary-blue); /* Thin left border to show nesting */
}

/* Animation classes for slide effects */
.comment-slide-down {
  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.comment-slide-up {
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(calc(var(--space-2-5) * -1));
  }
  to {
    opacity: 1;
    max-height: 1000px; /* Large enough value */
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    max-height: 1000px;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    max-height: 0;
    transform: translateY(calc(var(--space-2-5) * -1));
  }
}

/* Loading state animations */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.loading {
  animation: pulse 1.5s infinite;
}

/* ==========================================================================
   INLINE REPLY FORM SYSTEM
   ========================================================================== */

/* Reply form container */
.comment-reply-form {
  margin-top: var(--space-component-md);
  padding: var(--space-component-md);
  background: var(--color-bg-tertiary);
  border: var(--space-px) solid var(--comment-header-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 var(--space-1) var(--space-2) rgba(0, 0, 0, 0.1);
}

/* Reply form header */
.reply-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--space-px) solid var(--comment-header-border);
}

.reply-to-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-grey);
}

.reply-form-close {
  background: none;
  border: none;
  color: var(--text-grey);
  cursor: pointer;
  font-size: var(--text-lg);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  line-height: 1;
}

.reply-form-close:hover {
  color: var(--primary-red);
  background: rgba(162, 28, 36, 0.1);
}

/* Reply form body */
.reply-form-body {
  position: relative;
}

.inline-reply-form textarea {
  width: 100%;
  min-height: var(--space-20);
  padding: var(--space-3);
  border: var(--space-px) solid var(--comment-header-border);
  border-radius: var(--radius-md);
  font-family: var(--font-family-primary);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--black-text);
  background: var(--white-bg);
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.inline-reply-form textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 var(--space-0-5) rgba(2, 16, 89, 0.1);
}

.inline-reply-form textarea::placeholder {
  color: var(--text-grey);
}

/* Reply form actions */
.reply-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

/* Pill-shaped reply submit button */
.reply-submit-btn {
  background: var(--primary-blue);
  color: var(--silver);
  border: none;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-family: var(--font-family-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: var(--space-20);
  text-align: center;
}

.reply-submit-btn:hover {
  background: var(--primary-green);
  transform: translateY(calc(var(--space-px) * -1));
  box-shadow: 0 var(--space-1) var(--space-2) rgba(41, 123, 77, 0.2);
}

.reply-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 var(--space-0-5) var(--space-1) rgba(41, 123, 77, 0.2);
}

.reply-submit-btn:disabled {
  background: var(--text-grey);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.reply-submit-btn:disabled:hover {
  background: var(--text-grey);
  transform: none;
  box-shadow: none;
}

/* ==========================================================================
   PROFILE COMMENT THREAD STYLES
   ========================================================================== */

/* Profile comment thread container */
.profile-comment-thread {
  margin-bottom: var(--space-component-lg);
  border: var(--space-px) solid var(--comment-header-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white-bg);
}

/* Thread context header */
.thread-context {
  background: var(--bg-light);
  padding: var(--space-3) var(--space-component-md);
  border-bottom: var(--space-px) solid var(--comment-header-border);
  font-size: var(--text-sm);
}

.context-label {
  color: var(--text-grey);
  margin-right: var(--space-2);
}

.context-article {
  color: var(--primary-blue);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.context-article:hover {
  text-decoration: underline;
}

/* View in Article link styling */
.view-in-article {
  font-size: var(--text-sm);
  color: var(--primary-red);
  text-decoration: none;
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
  margin-left: var(--space-3);
}

.view-in-article:hover {
  background: rgba(162, 28, 36, 0.1);
  text-decoration: none;
}

/* Highlight user's own comments in thread (can be used if needed) */
.profile-comment-thread .comment[data-user-comment="true"] {
  background: linear-gradient(135deg, var(--bg-light) 0%, #f0f8ff 100%);
  border-left: var(--space-1) solid var(--primary-blue);
}

/* ==========================================================================
   MOBILE RESPONSIVE COMMENT STYLES
   ========================================================================== */

/* Desktop comment form - match comment width */
.add_comment .form-textarea {
  max-width: 100%;
}

@media (max-width: 1000px) {
  /* Mobile comment forms - match main-content area width */
  .add_comment {
    /* Use full available width within main-content container */
    width: 100%;
    margin: var(--space-5) 0;
    padding: var(--space-4);
    background: var(--white-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
    /* Inherit max-width from main-content grid area */
    max-width: 100%;
  }
  
  .add_comment textarea {
    width: 100%;
    min-height: var(--textarea-min-height);
    padding: var(--space-3);
    border: var(--space-0-5) solid var(--comment-header-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family-primary);
    font-size: var(--text-base);
    resize: vertical;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    max-width: 100%; /* Prevent overflow */
  }
  
  .add_comment textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
  }
  
  /* Mobile comments - match desktop styling exactly */
  .comment {
    margin: 0; /* Remove all vertical spacing */
    padding: var(--space-2-5); /* Match desktop padding */
    background: var(--silver);
    border: solid var(--primary-blue);
    border-width: var(--space-px) var(--space-0-5) var(--space-1) var(--space-1); /* Match desktop border */
    border-radius: var(--space-5); /* Match desktop border-radius */
    width: 88%; /* Match desktop width */
    box-sizing: border-box;
    font-family: var(--font-family-primary);
    font-size: var(--text-base);
    color: var(--primary-blue);
  }
  
  .comment_reply {
    margin: 0; /* Remove all vertical spacing */
    padding: var(--space-2-5); /* Match desktop padding */
    background: var(--comment-reply-bg);
    border: solid var(--primary-blue);
    border-width: var(--space-0) var(--space-0-5) var(--space-1) var(--space-1); /* Match desktop border */
    border-radius: var(--space-5); /* Match desktop border-radius */
    left: var(--space-10); /* Match desktop indentation */
    width: 82%; /* Match desktop width for right edge alignment */
    box-sizing: border-box;
    position: relative;
    display: block;
    font-family: var(--font-family-primary);
    font-size: var(--text-base);
    color: var(--primary-blue);
  }
  
  .parent_comment {
    margin: 0; /* Remove all vertical spacing */
    padding: var(--space-2-5); /* Match desktop padding */
    background: var(--silver);
    border: solid var(--primary-blue);
    border-width: var(--space-px) var(--space-0-5) var(--space-1) var(--space-1); /* Match desktop border */
    border-radius: var(--space-5); /* Match desktop border-radius */
    width: 88%; /* Match desktop width */
    box-sizing: border-box;
    font-family: var(--font-family-primary);
    font-size: var(--text-base);
    color: var(--primary-blue);
  }
  
  .comment_info {
    font-size: var(--text-sm);
    color: var(--text-grey);
    margin-bottom: var(--space-2);
  }
  
  .comment_content {
    font-family: var(--font-family-primary);
    line-height: 1.5;
    color: var(--primary-blue);
  }
}

/* ==========================================================================
   PARLEY (PRIVATE PROFILE COMMENTS) SYSTEM
   ========================================================================== */

/* Parley form styling */
.parley-form-container {
  background: var(--bg-light);
  border: var(--space-0-5) solid var(--primary-green);
  border-radius: var(--radius-lg);
  padding: var(--space-0);
  margin-bottom: var(--space-component-lg);
  box-shadow: var(--shadow-md);
  animation: slideDown 0.3s ease-out;
}

.parley-form-header {
  background: var(--bg-light);
  color: var(--primary-green);
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--radius-lg) var(--radius-lg) var(--space-0) var(--space-0);
}

.parley-form-header h3 {
  margin: var(--space-0);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-primary);
}

.parley-close-btn {
  background: none;
  border: none;
  color: var(--primary-green);
  font-size: var(--text-xl);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

.parley-close-btn:hover {
  background: rgba(0, 128, 0, 0.1);
}

.parley-form-body {
  padding: var(--space-4);
}

.parley-form textarea {
  width: 100%;
  min-height: var(--space-20);
  border: var(--space-0-5) solid var(--comment-header-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-family: var(--font-family-primary);
  font-size: var(--text-base);
  resize: vertical;
  box-sizing: border-box;
  max-width: 100%;
}

.parley-form-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  justify-content: flex-end;
}

.parley-send-btn {
  background: var(--primary-green) !important;
  border-color: var(--primary-green) !important;
}

.parley-send-btn:hover {
  background: var(--primary-blue) !important;
  border-color: var(--primary-blue) !important;
}

.parley-cancel-btn {
  background: var(--primary-green) !important;
  border: none !important;
}

.parley-cancel-btn:hover {
  background: var(--primary-red) !important;
  border: none !important;
}

/* Parley thread styling */
.profile-parley-section {
  background: var(--bg-light);
  border: var(--space-0-5) solid var(--primary-green);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-component-lg);
  position: relative;
}

.parley-section-header {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
}

.olive-branch-icon {
  font-size: var(--text-2xl);
  color: var(--primary-green);
  display: inline-block;
  animation: gentle-sway 3s ease-in-out infinite;
}

.parley-section-participant {
  margin-left: var(--space-2);
  font-size: var(--text-base);
  color: var(--primary-green);
  font-family: var(--font-family-primary);
}

.parley-section-participant .parley-other-participant {
  color: var(--primary-green);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.parley-section-participant .parley-other-participant:hover {
  color: var(--primary-blue);
  text-decoration: none;
}

@keyframes gentle-sway {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

.profile-parley-thread {
  background: linear-gradient(135deg, var(--bg-light) 0%, var(--color-success-bg) 100%);
  border: var(--space-px) solid var(--comment-header-border);
  border-radius: var(--radius-lg);
  margin-top: var(--space-8); /* Add space for the icon */
}

/* Parley comment highlighting */
.profile-parley-thread .comment[data-comment-id] {
  background: rgba(34, 197, 94, 0.05);
  border-left: var(--space-1) solid var(--primary-green);
}

/* Animation */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--space-4)));
  }
  to {
    opacity: 1;
    transform: translateY(var(--space-0));
  }
}

/* ==========================================================================
   PARLEY MESSAGE (INDEPENDENT) SYSTEM
   ========================================================================== */

/* Parley message styling - independent from comments */
.parley-message {
  background: rgba(34, 197, 94, 0.05);
  border: var(--space-px) solid var(--comment-header-border);
  border-left: var(--space-1) solid var(--primary-green);
  border-radius: var(--radius-lg);
  padding: var(--space-component-md);
  margin-bottom: var(--space-3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Tier-independent expanded parley message highlighting */
.parley-message[data-parley-id].parley-expanded {
  background: var(--color-success-bg-expanded);
  border: var(--space-0-5) solid var(--primary-green) !important;
  box-shadow: 0 var(--space-component-xs) var(--space-3) rgba(41, 123, 77, 0.2);
}

/* Child parley messages (nested) get light green background */
.parley-message-children .parley-message {
  background: var(--color-success-bg);
}

/* Parley expandable content styling */
.parley-expandable {
  cursor: pointer;
}


/* Parley children collapsible functionality */
.parley-children-collapsed {
  display: none;
}

.parley-children-expanded {
  display: block;
  animation: parleySlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Parley slide animations */
@keyframes parleySlideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(calc(var(--space-2-5) * -1));
  }
  to {
    opacity: 1;
    max-height: 1000px;
    transform: translateY(0);
  }
}

@keyframes parleySlideUp {
  from {
    opacity: 1;
    max-height: 1000px;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    max-height: 0;
    transform: translateY(calc(var(--space-2-5) * -1));
  }
}

.parley-message-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.parley-message-avatar {
  flex-shrink: 0;
}

.parley-message-avatar a {
  display: block;
  text-decoration: none;
}

.parley-message-meta {
  flex: 1;
  min-width: 0;
}

.parley-message-meta-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.parley-message-username {
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  color: var(--primary-green);
}

.parley-message-timestamp {
  color: var(--text-grey);
  font-size: var(--text-sm);
}


.parley-message-content {
  margin-bottom: var(--space-3);
  line-height: var(--leading-body);
  color: var(--black-text);
}

.parley-message-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.parley-reply-btn,
.parley-like-btn,
.parley-dislike-btn {
  background: none;
  border: none;
  color: var(--text-grey);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  transition: all 0.2s ease;
}

.parley-reply-btn {
  color: var(--primary-green);
}

.parley-reply-btn:hover {
  background: rgba(34, 197, 94, 0.1);
}

.parley-like-btn:hover {
  color: var(--primary-green);
  background: rgba(41, 123, 77, 0.1);
}

.parley-dislike-btn:hover {
  color: var(--primary-red);
  background: rgba(162, 28, 36, 0.1);
}

.parley-like-btn.liked {
  color: var(--primary-red);
}

.parley-dislike-btn.disliked {
  color: var(--primary-red);
}

.parley-like-btn.loading,
.parley-dislike-btn.loading {
  opacity: 0.6;
  cursor: not-allowed;
}

.parley-message-children {
  margin-top: var(--space-3);
}

/* Parley reply form */
.parley-reply-form {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-light);
  border: var(--space-px) solid var(--primary-green);
  border-radius: var(--radius-md);
  animation: slideDown 0.3s ease-out;
}

.parley-reply-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.parley-reply-form textarea {
  width: 100%;
  min-height: var(--space-16);
  padding: var(--space-2);
  border: var(--space-px) solid var(--comment-header-border);
  border-radius: var(--radius-md);
  resize: vertical;
  font-family: var(--font-family-primary);
  box-sizing: border-box;
  max-width: 100%;
}

.parley-reply-form-actions {
  margin-top: var(--space-2);
  display: flex;
  justify-content: flex-end;
}


.parley-reply-form-close {
  background: none;
  border: none;
  color: var(--text-grey);
  cursor: pointer;
  font-size: var(--text-lg);
  padding: var(--space-1);
}

.parley-reply-form-close:hover {
  color: var(--primary-red);
}

/* Responsive adjustments */
@media (max-width: 48rem) {
  .parley-form-header {
    padding: var(--space-2) var(--space-3);
  }
  
  .parley-form-header h3 {
    font-size: var(--text-base);
  }
  
  .parley-form-body {
    padding: var(--space-3);
  }
  
  .parley-form-actions {
    flex-direction: column;
  }
  
  .parley-message-children {
    padding-left: var(--space-3);
  }
}