/* Facebook-Style Compact Comments */
/* These rules use !important to override social.css defaults */

/* Comments list - vertical stack with breathing room */
.comments-section .comments-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 12px 0 !important;
}

/* Each comment - compact inline layout */
.comments-section .comment,
.comments-section .comment-reply {
  display: flex !important;
  align-items: flex-start !important;
  width: 100% !important;
  position: relative !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* Content wrapper - holds bubble, actions, and replies */
.comments-section .comment-content-wrapper {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}


/* Compact avatar - Facebook style 32px */
.comments-section .comment-avatar,
.comments-section .comment > img,
.comments-section .comment-reply > img {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border-radius: 50% !important;
  margin-right: 8px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  float: none !important;
}

/* Comment content - compact bubble */
.comments-section .comment-content {
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 8px 12px !important;
  color: #e8f0ff !important;
  display: inline-block !important;
  max-width: fit-content !important;
  margin-left: 0 !important;
}

/* Display name inline with text */
.comments-section .comment-content .display-name {
  font-weight: 600 !important;
  color: #fff !important;
  font-size: 13px !important;
  margin-right: 6px !important;
  display: inline !important;
}

/* Comment text inline */
.comments-section .comment-text {
  color: #e0e0e0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
  margin: 0 !important;
  display: inline !important;
}

/* ANY image inside comment-content must be constrained */
.comments-section .comment-content img:not(.comment-avatar):not(.reply-avatar) {
  max-width: 100% !important;
  max-height: 200px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 8px !important;
  display: block !important;
  margin-top: 6px !important;
}

/* Comment actions - inline below bubble */
.comments-section .comment-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
}


.comments-section .comment-time {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* Replies toggle button */
.comments-section .replies-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 0 !important;
  margin-top: 4px !important;
  color: #00b5cc !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
}

.comments-section .replies-toggle:hover {
  color: #00d4f0 !important;
}

.comments-section .replies-toggle .toggle-icon {
  transition: transform 0.2s ease !important;
}

.comments-section .replies-toggle.expanded .toggle-icon {
  transform: rotate(180deg) !important;
}

/* Replies container - collapsible */
.comments-section .comment-replies {
  display: flex !important;
  flex-direction: column !important;
  margin-top: 8px !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  position: relative !important;
  gap: 12px !important;
  width: 100% !important;
  overflow: hidden !important;
  transition: max-height 0.3s ease, opacity 0.2s ease !important;
}

/* Collapsed state */
.comments-section .comment-replies.collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  gap: 0 !important;
}

/* Expanded state */
.comments-section .comment-replies:not(.collapsed) {
  max-height: 2000px !important;
  opacity: 1 !important;
}

/* Remove the vertical line for cleaner look */
.comments-section .comment-replies::before {
  display: none !important;
}

/* Each reply - same compact style */
.comments-section .comment-replies > .comment-reply,
.comments-section .comment-replies > .comment {
  display: flex !important;
  width: 100% !important;
  flex: none !important;
}

/* Nested replies - minimal further indent */
.comments-section .comment-replies .comment-replies {
  margin-left: 0 !important;
}

/* Smaller avatar for replies - 28px */
.comments-section .comment-replies .comment-avatar,
.comments-section .comment-replies .comment-reply > img,
.comments-section .comment-replies .comment > img {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin-right: 8px !important;
}

.comments-section .comment-replies .comment-content {
  margin-left: 0 !important;
  border-left: none !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
}

/* Comment header - not needed separately */
.comments-section .comment-header {
  display: none !important;
}

/* Reply button - compact link style */
.comments-section .reply-btn {
  background: transparent !important;
  border: none !important;
  color: #00b5cc !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  display: inline !important;
}

.comments-section .reply-btn:hover {
  text-decoration: underline !important;
}

/* Reply input container - with proper spacing */
.comments-section .reply-input-container {
  margin-top: 10px !important;
  margin-bottom: 4px !important;
  margin-left: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Reply avatar - small */
.comments-section .reply-input-container img,
.comments-section .reply-input-container .reply-avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Reply input wrapper - single line with inline buttons */
.comments-section .reply-input-wrapper {
  flex: 1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

.comments-section .reply-input {
  flex: 1 !important;
  min-width: 150px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 18px !important;
  padding: 8px 14px !important;
  color: #fff !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
}

.comments-section .reply-input:focus {
  outline: none !important;
  border-color: #00b5cc !important;
}

.comments-section .reply-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

/* Compact reply buttons - inline small */
.comments-section .reply-actions .btn {
  padding: 4px 12px !important;
  font-size: 12px !important;
  border-radius: 14px !important;
}

.comments-section .reply-actions .btn-secondary {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.comments-section .reply-actions .btn-primary {
  background: #00b5cc !important;
  border: none !important;
}

/* Hover effect - subtle */
.comments-section .comment:hover .comment-content,
.comments-section .comment-reply:hover .comment-content {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ===== FIX POST IMAGE OVERFLOW ===== */
.post-card .post-image,
.feed-container .post-image {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  max-height: 500px !important;
  object-fit: contain !important;
  display: block !important;
}

.post-card,
.feed-container .post-card {
  overflow: hidden !important;
  max-width: 100% !important;
}

/* Global rule - ANY image inside comments-section */
.comments-section img:not(.comment-avatar):not(.reply-avatar) {
  max-width: 100% !important;
  max-height: 300px !important;
}

/* Main comment input - compact */
.comments-section .comment-input-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 0 !important;
}

.comments-section .comment-input-wrapper img {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  border-radius: 50% !important;
}

.comments-section .comment-input,
.comments-section input[type="text"][id^="commentInput"] {
  flex: 1 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 18px !important;
  padding: 8px 14px !important;
  color: #fff !important;
  font-size: 14px !important;
}

.comments-section .comment-input:focus,
.comments-section input[type="text"][id^="commentInput"]:focus {
  outline: none !important;
  border-color: #00b5cc !important;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .comments-section .replies-toggle {
    margin-left: 0 !important;
    padding-left: 0 !important;
    align-self: stretch !important;
    width: 100% !important;
    justify-content: flex-start !important;
    display: flex !important;
    box-sizing: border-box !important;
  }
  
  .comments-section .comment-avatar,
  .comments-section .comment > img {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }
  
  .comments-section .comment-content {
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
  
  .comments-section .comment-replies .comment-avatar,
  .comments-section .comment-replies .comment-reply > img {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
  }
  
  .comments-section .comment-replies .comment-content {
    padding: 5px 8px !important;
    font-size: 12px !important;
  }
  
  .comments-section .reply-input-container {
    margin-left: 28px !important;
    padding-left: 4px !important;
  }
  
  .comments-section .reply-input-container img,
  .comments-section .reply-input-container .reply-avatar {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
  }
  
  .comments-section .comment-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
  }
  .comments-section .comment-content {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding-bottom: 4px !important;
  }
  .comments-section .replies-toggle {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
    border-radius: 0 0 14px 14px !important;
    background: none !important;
    box-sizing: border-box !important;
    min-height: 28px !important;
  }
}