/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* TomSelect Chip Styles */
.ts-wrapper .item {
  @apply inline-flex items-center gap-2 bg-primary text-primary-content px-3 py-1 rounded-full text-sm font-medium border border-primary;
}

.ts-wrapper .item .remove {
  @apply cursor-pointer hover:bg-primary-focus rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold transition-colors duration-200;
}

.ts-wrapper .item .remove:hover {
  @apply bg-error text-error-content;
}

.ts-wrapper .option {
  @apply px-3 py-2 hover:bg-base-200 cursor-pointer;
}

.ts-wrapper .create {
  @apply px-3 py-2 text-primary font-medium;
}

/* Plugin remove_button styles */
.ts-wrapper .remove-single {
  @apply cursor-pointer hover:bg-primary-focus rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold transition-colors duration-200;
}

.ts-wrapper .remove-single:hover {
  @apply bg-error text-error-content;
}

/* Chat bubble fade-in */
@keyframes chat-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: chat-fade-in 0.2s ease-out;
}

/* Border Beam Animation */
@keyframes border-beam {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

.border-beam-container {
  position: relative;
}

.border-beam-container::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  background: linear-gradient(90deg, transparent, transparent, rgba(255, 255, 255, 0.7), transparent, transparent);
  background-size: 200% 100%;
  border-radius: inherit;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: subtract;
  animation: border-beam 3s linear infinite;
  pointer-events: none;
}

/* Headers de Editor.js renderizados en contenido público (BannersHelper) */
.editor-js-header-1 {
    @apply text-4xl font-medium;
    margin-bottom: 1rem;
}

.editor-js-header-2 {
    @apply text-3xl font-medium;
    margin-bottom: 1rem;
}

.editor-js-header-3 {
    @apply text-2xl font-medium;
    margin-bottom: 1rem;
}