/* Modern Comment Styles */

.comment-item {

transition: all 0.3s ease;

}



.comment-bubble {

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

transition: box-shadow 0.2s ease;

}



.comment-item:hover .comment-bubble {

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

}



.comment-like-btn,

.reply-btn,

.comment-options-btn {

transition: all 0.2s ease;

font-weight: 500;

}



.comment-like-btn:hover,

.reply-btn:hover {

color: #0a66c2 !important;

text-decoration: none;

}



.comment-like-btn:hover i,

.reply-btn:hover i {

transform: scale(1.1);

transition: transform 0.2s ease;

}



.comment-options-btn:hover {

color: #65676b !important;

}



.comment-reply-input {

transition: all 0.2s ease;

border-color: #e0e0e0;

font-weight: 500;

}



.comment-reply-input:focus {

border-color: #0a66c2;

box-shadow: 0 0 0 0.2rem rgba(10, 102, 194, 0.15);

}



.emoji-icon {

transition: all 0.2s ease;

}



.emoji-icon:hover {

opacity: 0.8;

transform: scale(1.1);

}



/* Nested comment styling */

.comment-item[style*="margin-left"] {

position: relative;

padding-left: 12px;

border-left: 2px solid #f0f2f5;

}



.comment-item[style*="margin-left"]:before {

content: "";

position: absolute;

left: -2px;

top: 0;

bottom: 0;

width: 2px;

background: linear-gradient(to bottom, #0a66c2, #f0f2f5);

transition: all 0.3s ease;

}



.comment-item[style*="margin-left"]:hover:before {

background: linear-gradient(to bottom, #0a66c2, #0a66c2);

width: 3px;

left: -3px;

}



/* Reply input animation */

.reply-input-container {

animation: slideDown 0.3s ease;

}



@keyframes slideDown {

from {

opacity: 0;

transform: translateY(-10px);

}

to {

opacity: 1;

transform: translateY(0);

}

}



/* Comment action buttons group */

.comment-item .d-flex:has(.comment-like-btn) {

gap: 16px;

margin-top: 6px;

}



/* Improved typography */

.comment-bubble p {

word-break: break-word;

white-space: pre-wrap;

}



/* Reaction and Comment Stats */

.post-stats {

display: flex;

gap: 16px;

padding: 8px 12px !important;

border-bottom: 1px solid #e0e0e0;

}



.reaction-stat,

.comment-stat {

display: flex;

align-items: center;

gap: 6px;

font-size: 13px;

color: #65676b;

cursor: pointer;

}



.reaction-stat:hover,

.comment-stat:hover {

color: #0a66c2;

text-decoration: none;

}



/* Post Action Buttons */

.post-actions {

padding: 8px 0 !important;

}



.post-actions > div {

margin-bottom: 6px;

}



.post-actions > div:last-child {

margin-bottom: 0;

}



.post-actions .btn-link {

padding: 6px 4px !important;

border-radius: 4px;

transition: all 0.2s ease;

color: #65676b !important;

text-decoration: none !important;

font-size: 12px;

font-weight: 500;

display: flex !important;

align-items: center;

justify-content: center;

gap: 4px;

white-space: nowrap;

flex: 1;

min-height: 32px;

}



.post-actions .btn-link:hover {

background-color: #f0f2f5;

color: #0a66c2 !important;

}



.post-actions .btn-link img {

max-width: 14px;

height: auto;

transition: transform 0.2s ease;

}



.post-actions .btn-link:hover img {

transform: scale(1.1);

}



/* Reaction buttons active state */

.reaction-btn.active {

background-color: #e7f3ff;

color: #0a66c2 !important;

}



.comment-input {

transition: all 0.2s ease;

border-color: #e0e0e0;

font-weight: 500;

}



.comment-input:focus {

border-color: #0a66c2;

box-shadow: 0 0 0 0.2rem rgba(10, 102, 194, 0.15);

outline: none;

}



/* SweetAlert2 compact styling */

.swal2-popup.swal-compact {

font-size: 13px;

border-radius: 10px;

}



.swal2-popup.swal-compact .swal2-title {

font-size: 16px;

margin: 0 0 6px;

}



.swal2-popup.swal-compact .swal2-html-container {

font-size: 13px;

margin: 4px 0 0;

}



.swal2-popup.swal-compact .swal2-actions {

margin-top: 10px;

}



.swal2-popup.swal-compact-edit {

padding: 8px 10px !important;

}



.swal2-popup.swal-compact-edit .swal2-input,

.swal2-popup.swal-compact-edit textarea {

margin: 6px 0 4px !important;

padding: 6px 8px !important;

font-size: 13px !important;

}



.border-underline {

border-top: 1px solid #e0e0e0 !important;

margin-top: 10px !important;

margin-bottom: 10px !important;

}