/* Animations */
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .animate-fade-in {
     animation: fadeIn 0.5s ease-out;
 }

 /* Comment Card */
 .comment-card {
     background: white;
     border-radius: 12px;
     padding: 1.25rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     border: 1px solid rgba(99, 102, 241, 0.1);
     transition: all 0.3s ease;
 }

 .comment-card:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
     border-color: rgba(99, 102, 241, 0.2);
 }

 /* Comment Avatar */
 .comment-avatar-img {
     width: 40px;
     height: 40px;
     object-fit: cover;
     border: 2px solid #6366f1;
 }

 .comment-avatar-placeholder {
     width: 40px;
     height: 40px;
     background: linear-gradient(135deg, #6366f1, #4f46e5);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
 }

 /* Comment Username */
 .comment-username {
     font-size: 0.95rem;
 }

 .comment-date {
     font-size: 0.8rem;
 }

 /* Comment Text */
 .comment-text {
     color: #495057;
     line-height: 1.5;
     margin: 0;
     padding-left: 3rem;
 }

 /* Reply Form */
 .reply-form-container {
     background: #f8f9fa;
     border-radius: 8px;
     padding: 1rem;
     border-left: 3px solid #6366f1;
 }

 .reply-form .form-group textarea {
     border-radius: 8px;
     border: 1px solid #e9ecef;
     resize: vertical;
     min-height: 80px;
     transition: all 0.3s ease;
 }

 .reply-form .form-group textarea:focus {
     border-color: #6366f1;
     box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
 }

 /* Buttons */
 .reply-btn {
     border-radius: 6px;
     font-size: 0.8rem;
     padding: 0.25rem 0.75rem;
     transition: all 0.3s ease;
 }

 .reply-btn:hover {
     transform: translateY(-1px);
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }

 .btn-primary {
     background: #6366f1;
     border: none;
     border-radius: 6px;
     transition: all 0.3s ease;
 }

 .btn-primary:hover {
     background: #4f46e5;
     transform: translateY(-1px);
     box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
 }

 /* Reply Container */
 .reply-container {
     position: relative;
 }

 .reply-container::before {
     content: '';
     position: absolute;
     left: -2px;
     top: 0;
     bottom: 0;
     width: 2px;
     background: linear-gradient(to bottom, transparent, #6366f1, transparent);
 }

 /* Nested comments - different background for better hierarchy */
 .comment-card .comment-card {
     background: #fafbff;
     border-color: rgba(99, 102, 241, 0.05);
 }

 .comment-card .comment-card:hover {
     background: #f8f9ff;
     border-color: rgba(99, 102, 241, 0.1);
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .comment-card {
         padding: 1rem;
     }

     .comment-header {
         flex-direction: column;
         align-items: flex-start;
     }

     .comment-actions {
         margin-top: 0.5rem;
         align-self: flex-end;
     }

     .comment-text {
         padding-left: 0;
     }

     .reply-container {
         margin-left: 1rem;
         padding-left: 1rem;
     }
 }

 @media (max-width: 576px) {
     .comment-card {
         padding: 0.75rem;
     }

     .comment-avatar-img,
     .comment-avatar-placeholder {
         width: 35px;
         height: 35px;
     }

     .reply-form-container {
         padding: 0.75rem;
     }

     .d-flex.gap-2 {
         flex-direction: column;
     }
 }