.mentioned-user {
  @apply inline-flex items-center px-2 py-1 text-sm font-medium text-blue-700 bg-blue-100 rounded-md;
}

.mentioned-user:hover {
  @apply bg-blue-200;
}

.mentions-container {
  @apply flex flex-wrap gap-1 mb-2;
  min-height: 0;
}

.mentions-container:empty {
  display: none;
}

/* Mentions dropdown container */
[data-controller="mentions"] {
  @apply relative;
}

[data-mentions-target="dropdown"] {
  @apply absolute;
  z-index: 1000;
}

/* Tiptap editor styles */
.ProseMirror {
  @apply outline-none text-sm leading-relaxed;
  font-size: 14px;
  line-height: 1.5;
}

.ProseMirror p {
  @apply my-2;
}

.ProseMirror p:first-child {
  @apply mt-0;
}

.ProseMirror p:last-child {
  @apply mb-0;
}

.ProseMirror p.is-editor-empty:first-child::before {
  @apply text-gray-500 pointer-events-none;
  content: attr(data-placeholder);
  float: left;
  height: 0;
}

/* Legacy ProseMirror mention styles - moved to social-editor-content */

.ProseMirror ul,
.ProseMirror ol {
  @apply pl-6 my-2;
}

.ProseMirror ul {
  @apply list-disc;
}

.ProseMirror ol {
  @apply list-decimal;
}

.ProseMirror li {
  @apply my-1;
}

.ProseMirror blockquote {
  @apply border-l-4 border-gray-300 pl-4 italic text-gray-700 my-2;
}

.ProseMirror a {
  @apply text-blue-600 underline;
}

.ProseMirror strong {
  @apply font-bold;
}

.ProseMirror em {
  @apply italic;
}

/* Legacy mention styles - now handled by social editor styles */

/* Modern Social Editor Styles - Aligned with Design System */
.social-editor-container {
  @apply border border-neutral-300 bg-white focus-within:ring-4 focus-within:ring-neutral-400/10 focus-within:border-neutral-400/80 transition-all duration-200 shadow-neutral-200/30 shadow-xs rounded-2xl;
}

.social-editor-content {
  @apply min-h-[120px] p-4;
}

.social-editor-content .ProseMirror {
  @apply min-h-[100px] outline-none text-neutral-900 antialiased font-normal text-base;
  line-height: 1.5;
}

.social-editor-content .ProseMirror p.is-editor-empty:first-child::before {
  @apply text-neutral-600/80 pointer-events-none;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  font-weight: 400;
}

.social-editor-tool-btn {
  @apply bg-transparent hover:bg-neutral-200/70 text-neutral-600 hover:text-neutral-800 focus:ring-neutral-300/25 disabled:opacity-50 disabled:cursor-not-allowed px-4 py-2 text-sm rounded-3xl font-medium transition-all duration-200 focus:ring-4 inline-flex items-center gap-2 border border-transparent hover:border-neutral-300/50;
}

.social-editor-tool-btn:hover {
  @apply bg-neutral-100 border-neutral-300 shadow-sm;
}

.social-editor-hint {
  @apply text-xs text-neutral-600 font-medium;
}

.social-editor-mention-hint {
  @apply inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-neutral-600 bg-neutral-200 rounded-full mr-1.5;
}

.social-editor-gallery {
  @apply p-4 border-b border-neutral-200 bg-gradient-to-b from-neutral-50 to-white;
  min-height: 60px; /* Ensure we can see it even when empty */
}

.social-editor-gallery.hidden {
  display: none;
}

.social-editor-gallery img {
  @apply rounded-lg shadow-sm transition-transform duration-200 hover:scale-105;
}

/* Image gallery animations */
.social-editor-gallery .image-grid {
  @apply transition-all duration-300 ease-out;
}

.social-editor-gallery .image-carousel {
  @apply transition-all duration-300 ease-out;
}

/* Improved scrollbar for image carousel */
.social-editor-gallery .overflow-x-auto {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

.social-editor-gallery .overflow-x-auto::-webkit-scrollbar {
  height: 4px;
}

.social-editor-gallery .overflow-x-auto::-webkit-scrollbar-track {
  background: transparent;
}

.social-editor-gallery .overflow-x-auto::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.5);
  border-radius: 2px;
}

.social-editor-gallery .overflow-x-auto::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.7);
}

/* Enhanced mention styles - matching design system */
.social-editor-content .mention-tag {
  @apply inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-800 rounded-md text-xs font-medium hover:bg-blue-200 transition-colors duration-150;
}

.social-editor-content .mention-tag img {
  @apply w-4 h-4 rounded-full shrink-0;
}

.social-editor-content .mention-tag .avatar-placeholder {
  @apply w-4 h-4 rounded-full bg-blue-200 flex items-center justify-center text-blue-800 text-xs font-medium shrink-0;
}

/* Enhanced mentions dropdown - matching design system */
.mention-suggestions {
  @apply bg-white border border-neutral-200 rounded-lg shadow-lg max-h-60 overflow-y-auto z-50;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.mention-item {
  @apply px-4 py-2 cursor-pointer flex items-center gap-3 hover:bg-neutral-50 transition-colors duration-150;
}

.mention-item img {
  @apply w-6 h-6 rounded-full shrink-0;
}

.mention-item .avatar-placeholder {
  @apply w-6 h-6 rounded-full bg-neutral-200 flex items-center justify-center text-neutral-600 text-xs font-medium shrink-0;
}

.mention-item.selected {
  @apply bg-blue-50 text-blue-700;
}

.mention-item .user-info {
  @apply flex-1 min-w-0;
}

.mention-item .user-name {
  @apply font-medium text-sm text-neutral-900 truncate;
}

.mention-item .user-role {
  @apply text-xs text-neutral-500 truncate;
}

.mention-item.selected .user-name {
  @apply text-blue-700;
}

/* Social editor image gallery styles */
.scrollbar-hide {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

/* Emoji picker styling */
.emoji-picker {
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  font-family: inherit !important;
}

/* Modern emoji picker element styling */
emoji-picker {
  --border-radius: 12px;
  --border-color: #e5e7eb;
  --background: white;
  --input-border-color: #d1d5db;
  --input-border-radius: 8px;
  --input-padding: 8px 12px;
  --input-font-size: 14px;
  --category-emoji-size: 18px;
  --emoji-size: 20px;
  --indicator-color: #3b82f6;
  --outline-color: rgba(59, 130, 246, 0.3);
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

.emoji-picker .emoji-picker__header {
  border-bottom: 1px solid #f3f4f6 !important;
  background: #f9fafb !important;
  border-radius: 12px 12px 0 0 !important;
}

.emoji-picker .emoji-picker__search-container {
  padding: 12px !important;
  background: #f9fafb !important;
}

.emoji-picker .emoji-picker__search {
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
}

.emoji-picker .emoji-picker__search:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  outline: none !important;
}

.emoji-picker .emoji-picker__category-button.active {
  background: #3b82f6 !important;
  color: white !important;
}

.emoji-picker .emoji-picker__emoji:hover {
  background: #f3f4f6 !important;
  border-radius: 6px !important;
}

/* Mobile optimizations */
@media (max-width: 640px) {
  [data-mentions-target="dropdown"] {
    @apply left-0 right-4;
    min-width: auto !important;
    max-width: calc(100vw - 2rem) !important;
  }

  .mention-user {
    @apply px-3 py-3;
  }

  .mention-user .text-sm {
    @apply text-base;
  }

  .emoji-picker {
    max-width: calc(100vw - 2rem) !important;
    max-height: 50vh !important;
  }
}