/* Error notification animations and styles */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutToRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

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

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

/* Error notification specific styles */
#error-notifications {
  pointer-events: none;
}

#error-notifications > * {
  pointer-events: auto;
}

/* Better visual hierarchy for error details */
#error-notifications details {
  margin-top: 8px;
}

#error-notifications details[open] summary {
  margin-bottom: 4px;
}

#error-notifications summary::-webkit-details-marker {
  display: none;
}

#error-notifications summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 4px;
  transition: transform 0.2s ease;
}

#error-notifications details[open] summary::before {
  transform: rotate(90deg);
}

/* Action button improvements */
#error-notifications button:focus {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
}

#error-notifications button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile responsive improvements */
@media (max-width: 640px) {
  #error-notifications {
    left: 16px;
    right: 16px;
    top: 16px;
  }
  
  #error-notifications .max-w-md {
    max-width: none;
  }
}