/* Chat Module Styles - Fixes emoji autocomplete UX and dropdown positioning */

/* Emoji autocomplete dropdown improvements */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
  border: 1px solid #E5E7EB;
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  max-width: 200px !important; /* Reduced from 400px to 200px for more compact display */
  min-width: 200px;
  padding: 12px;
  font-size: 16px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 9999999999 !important;
}

/* Emoji autocomplete list container */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 300px;
  overflow-y: auto;
}

/* Individual emoji items */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li {
  display: inline-block;
  vertical-align: top;
  padding: 6px;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 2px;
  min-height: 32px;
  min-width: 32px;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li:hover {
  background-color: #F3F4F6;
  border-radius: 0.5rem; /* 8px border radius on hover */
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #E5E7EB;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li div {
  font-size: 1.25rem !important; /* Slightly smaller emoji size for compact layout */
  line-height: 1;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Emoji search input improvements */
.emoji_char_input.search {
  border: 1px solid #E5E7EB;
  border-radius: 0.5rem;
  padding: 8px 12px;
  font-size: 0.89rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.emoji_char_input.search:focus {
  outline: none;
  border-color: #5062FF;
  box-shadow: 0 0 0 3px rgba(80, 98, 255, 0.1);
}

/* Fix dropdown positioning to prevent cutoff while preserving JavaScript positioning */
.chat-more-drop-back.w-dropdown-list {
  position: absolute !important;
  z-index: 999999 !important;
  max-height: calc(100vh - 40px) !important;
  overflow-y: auto !important;
}

/* Ensure dropdown is always visible - work with existing JavaScript positioning */
.chat-more-drop-back.w-dropdown-list.w--open {
  /* Keep the JavaScript positioning (top: -120px) but ensure visibility */
  visibility: visible !important;
  opacity: 1 !important;
}

/* Preserve inline positioning for last message dropdowns */
.chat-more-drop-back.w-dropdown-list.w--open[style*="top: -120px"] {
  top: -120px !important;
}

/* Smart positioning for context menus near bottom of viewport */
.chat-more-drop-back.w-dropdown-list.w--open {
  /* Check if dropdown would be cut off at bottom */
  /* If the dropdown extends below viewport, adjust positioning */
  max-height: calc(100vh - 20px) !important;
}

/* Make reply, edit, delete options more compact */
.chat-drop-option-link {
  padding-top: 0 !important; /* Remove top padding completely */
  padding-bottom: 0 !important; /* Remove bottom padding completely */
  margin-top: -4px !important; /* Negative margin to pull elements closer */
  margin-bottom: -4px !important; /* Negative margin to pull elements closer */
}

.chat-drop-option-link a {
  padding-top: 0 !important; /* Remove top padding completely */
  padding-bottom: 0 !important; /* Remove bottom padding completely */
  margin: 0 !important; /* Remove all margins */
  line-height: 1.2 !important; /* Tighter line height for more compact text */
}

/* Make emoji icons smaller on desktop, keep mobile size */
.emoji-char-display.library {
  font-size: 18px !important;
  padding: 7px !important;
}

/* Remove bottom border from popular emojis section */
.popular-emojis {
  border-bottom: none !important;
}

/* New horizontal icon buttons row styling */
.chat-actions-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 7px !important;
  margin-bottom: 8px !important;
  /* border-bottom: 1px solid #E5E7EB !important; */
}

.chat-action-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 32px !important;
  border-radius: 12px !important;
  background-color: #F9FAFB !important;
  border: 1px solid #E5E7EB !important;
  color: #374151 !important;
  font-size: 16px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  outline: none !important;
  flex-shrink: 0 !important;
  padding: 0 8px !important;
  margin: 0 4px !important;
}

.chat-action-btn:hover {
  background-color: #F0F1F5 !important;
  border-color: #E5E7EB !important;
  border-width: 1px !important;
  transform: none !important;
  box-shadow: none !important;
}

.chat-action-btn:active {
  transform: none !important;
  box-shadow: none !important;
  background-color: #E8E9ED !important;
  border-color: #E5E7EB !important;
}

/* Ensure icon buttons have same behavior as existing links */
.chat-action-btn.chat-options-link:hover {
  background-color: #F0F1F5 !important;
  border-color: #E5E7EB !important;
}

.chat-action-btn.chat-options-link.chat-message-reply-bottom:hover {
  background-color: #F0F1F5 !important;
  border-color: #E5E7EB !important;
}

.chat-action-btn.chat-options-link.chat-message-edit:hover {
  background-color: #F0F1F5 !important;
  border-color: #E5E7EB !important;
}

.chat-action-btn.chat-options-link.chat-message-delete:hover {
  background-color: #F0F1F5 !important;
  border-color: #E5E7EB !important;
}

.chat-action-btn i {
  font-size: 14px !important;
  color: #1c1c1e !important;
}

.fa-solid, .fas {
  font-weight: 600;
}

.chat-action-btn:hover i {
  color: #374151 !important;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 479px) {
  .chat-more-drop-back.w--open {
    left: -126px !important;
    top: -80px !important;
    width: 230px !important;
    min-width: 180px !important;
    max-width: 230px !important;
  }
  
  .ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
    max-width: 180px !important;
    min-width: 180px;
    padding: 10px;
  }
  
  .ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li {
    min-height: 28px;
    min-width: 28px;
    padding: 4px;
    margin: 1px;
  }
  
  .ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li div {
    font-size: 1.125rem !important;
  }
  
  /* Keep emoji icons at 18px on mobile */
  .emoji-char-display.library {
    font-size: 18px !important; /* Keep original size on mobile */
    padding: 7px !important; /* Keep original padding on mobile */
  }
  
  /* Make chat options text 16px on mobile */
  .chat-drop-option-link .chat-options-link .chat-options-text {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    flex: 1 !important;
  }
}

/* Chat Edit Box Scroll Behavior */
.chat-edit-box {
  scroll-margin-bottom: 120px; /* Account for compose area height */
  scroll-margin-top: 20px; /* Add some top margin for better visibility */
}

/* Improve chat menu click area */
.chat-more-options {
  padding: 8px 12px !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  transition: background-color 0.2s ease !important;
}

.chat-more-options:hover {
  background-color: #F0F1F5 !important;
}

/* Ensure edit box is visible when it becomes visible */
.chat-edit-box:not([style*="display: none"]) {
  scroll-behavior: smooth;
}

/* For last message edit box, add extra bottom margin */
.chat-edit-box:last-of-type {
  scroll-margin-bottom: 150px; /* Extra margin for last message */
}

/* Modern hashtag badge styling - crisp and inline-friendly */
.chat-hashtag {
  color: #5062FF !important; /* Use brand primary color */
  background: linear-gradient(135deg, rgba(80, 98, 255, 0.08) 0%, rgba(80, 98, 255, 0.12) 100%) !important;
  border-radius: 0.375rem !important; /* 6px - modern rounded corners */
  padding: 0.125rem 0.375rem !important; /* 2px 6px - minimal padding for inline flow */
  margin: 0 0.125rem !important; /* 0 2px - tiny horizontal margin */
  font-weight: 500 !important; /* Slightly bolder for crisp appearance */
  font-size: 0.875rem !important; /* Desktop font size consistent with codebase */
  display: inline-block !important;
  line-height: 1.2 !important; /* Tight line height to prevent height increase */
  vertical-align: baseline !important; /* Align with text baseline */
  border: none !important; /* No borders to maintain inline flow */
  box-shadow: 0 1px 2px rgba(80, 98, 255, 0.1) !important; /* Subtle shadow for depth */
  transition: all 0.2s ease !important; /* Smooth transitions */
  text-decoration: none !important;
  -webkit-text-stroke-width: 0px !important;
  user-select: all !important; /* Allow text selection */
}

/* Hover state for better interactivity */
.chat-hashtag:hover {
  background: linear-gradient(135deg, rgba(80, 98, 255, 0.12) 0%, rgba(80, 98, 255, 0.16) 100%) !important;
  box-shadow: 0 2px 4px rgba(80, 98, 255, 0.15) !important;
  transform: translateY(-0.5px) !important; /* Subtle lift effect */
}

/* Active state */
.chat-hashtag:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(80, 98, 255, 0.1) !important;
}

/* Ensure hashtags work well in different contexts */
.chat-message-text .chat-hashtag,
.chat-parent-message-text .chat-hashtag {
  margin: 0 0.125rem !important; /* Consistent spacing */
}

/* Clickable hashtag styling for dropdown interactions */
.clickable-hashtag {
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.clickable-hashtag:hover {
  background: linear-gradient(135deg, rgba(80, 98, 255, 0.15) 0%, rgba(80, 98, 255, 0.20) 100%) !important;
  box-shadow: 0 3px 6px rgba(80, 98, 255, 0.2) !important;
  transform: translateY(-1px) !important; /* More pronounced lift for clickable elements */
}

.clickable-hashtag:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(80, 98, 255, 0.1) !important;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 479px) {
  .chat-hashtag {
    font-size: 1rem !important; /* Mobile font size */
    padding: 0.125rem 0.25rem !important; /* Slightly less padding on mobile */
    border-radius: 0.5rem !important; /* 8px on mobile */
  }
}