/* Emoji Search Autocomplete - Tailwind-inspired formatting */

/* Autocomplete dropdown container - match chat dropdown width */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
  @apply bg-white border border-gray-200 rounded-lg shadow-lg;
  max-width: 210px !important;
  min-width: 210px;
  width: 210px !important;
  padding: 8px;
  font-size: 14px;
  z-index: 9999999999 !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Autocomplete list container */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front ul {
  @apply block m-0 p-0 list-none;
  max-height: 300px;
  overflow-y: auto;
}

/* Individual emoji items - Compact grid layout */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li {
  @apply inline-block align-top cursor-pointer transition-all duration-150;
  padding: 6px;
  border-radius: 6px;
  margin: 1px;
  min-height: 32px;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid transparent;
}

/* Hover state for emoji items - Subtle and smooth */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li:hover {
  @apply bg-gray-50;
  border-radius: 6px;
  border: 1px solid #E5E7EB;
  transform: none;
  box-shadow: none;
}

/* Active state for emoji items */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li:active {
  @apply bg-gray-100;
  transform: none;
  box-shadow: none;
}

/* Emoji content inside items */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li div {
  @apply text-lg leading-none text-center w-full h-full flex items-center justify-center;
  font-size: 1.125rem !important;
}

/* Search input improvements */
.emoji_char_input.search {
  @apply border border-gray-300 rounded-md px-3 py-2 text-sm transition-all duration-200;
  font-size: 0.89rem;
}

.emoji_char_input.search:focus {
  @apply outline-none border-blue-500 ring-2 ring-blue-200;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Form layout improvements */
.emoji-search-form {
  @apply flex gap-2 items-center;
}

.emoji-search-form .emoji_char_input.search {
  @apply flex-1;
}

.emoji-search-form .w-button {
  @apply px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 479px) {
  .ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
    max-width: 200px !important;
    min-width: 200px;
    width: 200px !important;
    padding: 8px;
  }
  
  .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: 1rem !important;
  }
  
  .emoji-search-form {
    @apply flex-col gap-2;
  }
  
  .emoji-search-form .w-button {
    @apply w-full;
  }
}

/* Override any conflicting styles from swot-min.css */
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
  border: 1px solid #E5E7EB !important;
  background-color: #FFFFFF !important;
  border-radius: 0.5rem !important;
  width: 210px !important;
  max-width: 210px !important;
  min-width: 210px !important;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li:hover {
  background-color: #F9FAFB !important;
  border: none !important;
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
}

/* Override jQuery UI default hover styles */
.ui-menu .ui-menu-item-wrapper:hover,
.ui-menu .ui-menu-item:hover,
.ui-menu .ui-state-hover {
  background-color: #F9FAFB !important;
  border: none !important;
  color: inherit !important;
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
}

/* Override any blue hover states */
.ui-menu .ui-menu-item-wrapper:hover,
.ui-menu .ui-menu-item:hover,
.ui-menu .ui-state-hover,
.ui-menu .ui-state-active {
  background: #F9FAFB !important;
  background-color: #F9FAFB !important;
  border: none !important;
  border-color: transparent !important;
  color: inherit !important;
}

/* Remove any jQuery UI focus/active states */
.ui-menu .ui-menu-item-wrapper:focus,
.ui-menu .ui-menu-item:focus,
.ui-menu .ui-state-focus {
  background-color: #F9FAFB !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
