/* Custom styles */
.ticket-card {
  transition: all 0.2s ease;
}

.ticket-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.priority-urgent {
  border-left: 4px solid #ef4444;
}

.priority-high {
  border-left: 4px solid #f97316;
}

.priority-normal {
  border-left: 4px solid #3b82f6;
}

.priority-low {
  border-left: 4px solid #6b7280;
}

.status-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
}

.status-open {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.status-pending {
  background-color: #fef3c7;
  color: #b45309;
}

.status-resolved {
  background-color: #d1fae5;
  color: #047857;
}

.status-closed {
  background-color: #f3f4f6;
  color: #4b5563;
}

.message-bubble {
  max-width: 80%;
  border-radius: 1rem;
  padding: 0.75rem 1rem;
}

.message-customer {
  background-color: #f3f4f6;
  border-bottom-left-radius: 0.25rem;
}

.message-agent {
  background-color: #dbeafe;
  border-bottom-right-radius: 0.25rem;
  margin-left: auto;
}

.message-internal {
  background-color: #fef3c7;
  border: 1px dashed #f59e0b;
}

/* Loading spinner */
.spinner {
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Fade transitions */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}