@import "recogito.css";

/* Custom select dropdown styles to add padding for chevron */
@layer components {
  select {
    @apply pr-10; /* Add padding-right to give space for dropdown chevron */
  }
  
  /* Activity feed divider style */
  .activity-feed-divider {
    @apply border-t border-gray-200;
  }
}

/* Apply base styling to the trix-editor tag when it's within .prose */
.prose trix-editor {
  /* This ensures that direct child elements like h1, div get prose context */
  @apply focus:outline-none; /* Removes default focus outline if not desired */
}

.prose trix-editor h1,
.prose .trix-content h1 { /* Target h1 within prose trix-editor and prose .trix-content for display */
  @apply text-3xl font-bold mb-4;
}

.prose trix-editor h2, /* If you use H2s */
.prose .trix-content h2 {
  @apply text-2xl font-bold mt-6 mb-3;
}

/* Style for Trix 'paragraphs' which are <div>s */
.prose trix-editor div,
.prose .trix-content div {
  /* Ensure this doesn't accidentally style divs within other elements like blockquotes or lists if Trix nests them heavily. */
  /* For now, this targets all divs directly under trix-editor or .trix-content */
  @apply mb-4;
}

/* More specific selectors for overriding actiontext.css if needed */
/* If these are not enough, we might re-introduce !important correctly */
body .trix-content h1 {
  @apply text-3xl font-bold mt-8 mb-4;
}

body .trix-content div:not([class*='trix-']) {
  @apply mb-4;
}

/* Reset some Trix defaults to better inherit from .prose */
trix-editor {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Ensure that direct children of trix-editor that are part of the content flow get base styling */
/* This is important if Trix doesn't wrap all content in a single .trix-content div during editing */
.prose trix-editor > * {
  @apply text-gray-700;
}

.prose trix-editor strong {
 @apply font-bold;
}

/* Add more specific Trix element styling as needed */


/* Emoji reaction button hover states */
.emoji-reaction-button {
  @apply inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full border transition-all duration-150;
}

/* Reaction button specific hover for tooltips */
.reaction-button:hover .tooltip {
  @apply opacity-100;
}

/* Ensure tooltips are visible above other elements */
.emoji-reaction-tooltip {
  z-index: 9999;
}

/* Smooth transitions for emoji picker */
[data-emoji-reactions-target="picker"] {
  @apply transition-opacity duration-200;
}

[data-emoji-reactions-target="picker"].hidden {
  @apply opacity-0 pointer-events-none;
}

/* Position emoji picker above reactions when near bottom of viewport */
[data-emoji-reactions-target="picker"] {
  bottom: 100%;
  margin-bottom: 0.5rem;
}