/* Modern Message Notification System */
/* Uses theme variables from theme-variables.css */

.message-wrapper {
  position: fixed;
  top: 20px;
  right: 20px;
  max-width: 360px;
  width: calc(100% - 40px);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.message-toast {
  display: flex;
  align-items: center;
  background-color: var(--bg-card);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--shadow);
  overflow: hidden;
  padding: 16px 20px 16px 16px;
  position: relative;
  transform: translateX(120%);
  animation: slide-in 0.4s forwards cubic-bezier(0.3, 0, 0.3, 1);
  pointer-events: auto;
}

/* Hiding class moved to bottom to ensure it overrides disappearing state */

@keyframes slide-in {
  to { transform: translateX(0); }
}

@keyframes slide-out {
  0% { transform: scale(0.95) translateX(0); opacity: 0.8; }
  100% { transform: scale(0.95) translateX(120%); opacity: 0; }
}

.message-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  margin-right: 12px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
}

/* Message content - Ensure all message content has consistent styling */
.message-content {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
  padding-right: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-primary);
}

.message-close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  height: 32px; /* Increased touch target */
  width: 32px;  /* Increased touch target */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0.6;
  transition: all 0.2s;
  color: var(--text-primary);
  margin-left: 8px; /* Add some spacing */
}

.message-close:hover {
  opacity: 1;
  background-color: var(--bg-hover);
}

/* Progress bar animation */
@keyframes shrink {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

.message-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: left;
}

/* Message types */
.message-toast.success {
  border-left: 4px solid var(--success-text);
  background-color: var(--bg-card);
}
.message-toast.success .message-icon {
  background-color: var(--success-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
}
.message-toast.success .message-progress {
  background-color: var(--success-text);
}

.message-toast.info {
  border-left: 4px solid var(--info-text);
  background-color: var(--bg-card);
}
.message-toast.info .message-icon {
  background-color: var(--info-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}
.message-toast.info .message-progress {
  background-color: var(--info-text);
}

.message-toast.warning {
  border-left: 4px solid var(--warning-text);
  background-color: var(--bg-card);
}
.message-toast.warning .message-icon {
  background-color: var(--warning-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}
.message-toast.warning .message-progress {
  background-color: var(--warning-text);
}

.message-toast.error {
  border-left: 4px solid var(--error-text);
  background-color: var(--bg-card);
}
.message-toast.error .message-icon {
  background-color: var(--error-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}
.message-toast.error .message-progress {
  background-color: var(--error-text);
}

/* Add auth message type styling */
.message-toast.auth {
  border-left: 4px solid var(--info-text);
  background-color: var(--bg-card);
}

.message-toast.auth .message-icon {
  background-color: var(--info-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 1c4.97 0 9 4.03 9 9s-4.03 9-9 9-9-4.03-9-9 4.03-9 9-9zm3.23 6.83-1.06-1.06-5.17 5.17-2.17-2.17-1.06 1.06 3.23 3.23 6.23-6.23z'/%3E%3C/svg%3E");
}

.message-toast.auth .message-progress {
  background-color: var(--success-text);
}

/* Default/unspecified message style */
.message-toast:not(.success):not(.info):not(.warning):not(.error):not(.auth) {
  border-left: 4px solid var(--primary);
  background-color: var(--bg-card);
}
.message-toast:not(.success):not(.info):not(.warning):not(.error):not(.auth) .message-icon {
  background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/%3E%3C/svg%3E");
}
.message-toast:not(.success):not(.info):not(.warning):not(.error):not(.auth) .message-progress {
  background-color: var(--primary);
}

/* Exit animation */
@keyframes scale-out {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* Fixed animation handling */
.message-toast.disappearing {
  animation: scale-out 0.3s ease-out forwards;
}

/* Remove specific type animations for disappearing state as we use a generic one */
.message-toast.disappearing.success,
.message-toast.disappearing.info,
.message-toast.disappearing.warning,
.message-toast.disappearing.error,
.message-toast.disappearing.auth {
  animation: scale-out 0.3s ease-out forwards;
}

/* Prevent hover animation conflicts */
.message-toast.disappearing:hover {
  animation-play-state: running;
}

/* Ensure hiding overrides disappearing */
.message-toast.hiding {
  animation: slide-out 0.4s forwards cubic-bezier(0.7, 0, 0.7, 1);
}

/* Mobile responsiveness */
@media screen and (max-width: 576px) {
  .message-wrapper {
    bottom: 20px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px); /* Full width with padding */
    max-width: 400px;
    align-items: center; /* Center items in wrapper */
  }
  
  .message-toast {
    width: 100%; /* Full width cards */
    transform: translateY(120%);
    animation: slide-up 0.4s forwards cubic-bezier(0.3, 0, 0.3, 1);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* Stronger shadow for mobile overlay */
  }

  .message-toast.hiding {
    animation: slide-down 0.4s forwards cubic-bezier(0.7, 0, 0.7, 1);
  }

  @keyframes slide-up {
    to { transform: translateY(0); }
  }

  @keyframes slide-down {
    0% { transform: scale(0.95) translateY(0); opacity: 0.8; }
    100% { transform: scale(0.95) translateY(120%); opacity: 0; }
  }
}