/* Forum Interactive Styles */

/* Nav user section */
.nav-user { display: flex; align-items: center; gap: 8px; }
.nav-avatar { width: 32px; height: 32px; border-radius: 50%; background: #22c55e; color: white; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; text-decoration: none; }
.nav-username { font-size: 14px; color: #333; font-weight: 500; }
.btn-logout { font-size: 13px; color: #888; text-decoration: none; margin-left: 4px; }
.btn-logout:hover { color: #ef4444; }

/* Reply form */
.reply-form-wrapper { margin-top: 24px; }
.reply-form-card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.reply-form-card h3 { margin: 0 0 12px; font-size: 16px; color: #333; }
.reply-form-card textarea, .thread-title-input { width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 14px; font-family: inherit; resize: vertical; box-sizing: border-box; }
.thread-title-input { margin-bottom: 12px; }
.reply-form-card textarea:focus, .thread-title-input:focus { outline: none; border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.1); }
.reply-form-actions { margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.btn-primary { background: #22c55e; color: white; border: none; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; }
.btn-primary:hover { background: #16a34a; }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-secondary { background: #f3f4f6; color: #555; border: none; padding: 10px 20px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.btn-secondary:hover { background: #e5e7eb; }

/* New thread form */
.new-thread-form { margin-top: 16px; clear: both; }

/* Like button */
.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.like-btn:hover {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #16a34a;
}
.like-btn.liked {
  background: #f0fdf4;
  border-color: #86efac;
  color: #16a34a;
  font-weight: 500;
}
.like-btn.liked .like-icon {
  transform: scale(1.15);
}
.like-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}
.like-icon {
  font-size: 16px;
  transition: transform 0.2s ease;
}
.like-count {
  font-weight: 500;
}