/*
 * 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.
 */

/* Toast notification animations */
@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes scale-in {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-slide-in {
  animation: slide-in 0.3s ease-out;
}

.animate-scale-in {
  animation: scale-in 0.2s ease-out;
}

/* Phase B "new since you opened the page" indicator on
 * dashboard ticket rows. Hidden by default; visible only when
 * the row wrapper carries `data-unread="true"`, which is added
 * client-side by the tickets_dashboard Stimulus controller
 * when a Turbo Stream broadcast inserts a fresh row. The
 * controller's selectTicket() clears the attribute so picking
 * the row marks it read. */
[data-unread-dot] {
  display: none;
}
[data-unread="true"] [data-unread-dot] {
  display: inline-block;
}

/* Message bubble animation */
@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-message-in {
  animation: message-in 0.25s ease-out;
}

/* New conversation pulse — fades from highlight to transparent */
@keyframes conversation-pulse {
  0% { background-color: #DBEAFE; }
  100% { background-color: transparent; }
}

.conversation-pulse {
  animation: conversation-pulse 3s ease-out forwards;
}