/* Modern Message Notification System */
:root {
  --primary-color: #3498db;
  --success-color: #2ecc71;
  --info-color: #3498db;
  --warning-color: #f39c12;
  --error-color: #e74c3c;
  --auth-color: #4285F4;  /* Google blue */
  --auth-accent: #34A853;  /* Google green */
  --text-light: #ffffff;
  --text-dark: #2c3e50;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --dismiss-glow: rgba(231, 76, 60, 0.5);
}

.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;
}

.message-toast {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--shadow-color);
  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);
}

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

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

@keyframes slide-out {
  to { transform: translateX(120%); }
}

.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-dark); /* Keep this consistent */
}

.message-close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  height: 24px;
  width: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0.6;
  transition: opacity 0.2s;
  color: var(--text-dark);
}

.message-close:hover {
  opacity: 1;
}

/* 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-color);
  background-color: white; /* Restore solid background */
}
.message-toast.success .message-icon {
  background-color: var(--success-color);
  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-color);
}

.message-toast.info {
  border-left: 4px solid var(--info-color);
  background-color: white; /* Restore solid background */
}
.message-toast.info .message-icon {
  background-color: var(--info-color);
  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-color);
}

.message-toast.warning {
  border-left: 4px solid var(--warning-color);
  background-color: white; /* Restore solid background */
}
.message-toast.warning .message-icon {
  background-color: var(--warning-color);
  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-color);
}

.message-toast.error {
  border-left: 4px solid var(--error-color);
  background-color: white; /* Restore solid background */
}
.message-toast.error .message-icon {
  background-color: var(--error-color);
  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-color);
}

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

.message-toast.auth .message-icon {
  background-color: var(--auth-color);
  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(--auth-accent);
}

/* Default/unspecified message style */
.message-toast:not(.success):not(.info):not(.warning):not(.error):not(.auth) {
  border-left: 4px solid var(--primary-color);
  background-color: white; /* Restore solid background */
}
.message-toast:not(.success):not(.info):not(.warning):not(.error):not(.auth) .message-icon {
  background-color: var(--primary-color);
  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-color);
}

/* Enhanced Red glow effect for disappearing messages */
@keyframes red-glow {
  0% {
    box-shadow: 0 4px 12px var(--shadow-color);
  }
  25% {
    box-shadow: 3px 0 15px var(--dismiss-glow);
  }
  50% {
    box-shadow: 0 0 20px 5px var(--dismiss-glow);
  }
  75% {
    box-shadow: -3px 0 15px var(--dismiss-glow);
  }
  100% {
    box-shadow: 0 0 25px 8px var(--dismiss-glow);
  }
}

@keyframes border-glow {
  0% {
    border-left: 4px solid;
  }
  50% {
    border-left: 8px solid;
  }
  100% {
    border-left: 4px solid;
  }
}

@keyframes border-pulse {
  0% { border-left-width: 4px; }
  50% { border-left-width: 8px; }
  100% { border-left-width: 4px; }
}

/* Fixed animation handling */
.message-toast.disappearing {
  box-shadow: 0 4px 12px var(--shadow-color);
  animation: red-glow 1.2s ease-in infinite;
}

.message-toast.disappearing.success {
  animation: border-pulse 0.8s infinite, red-glow 1.2s ease-in infinite;
}

.message-toast.disappearing.info {
  animation: border-pulse 0.8s infinite, red-glow 1.2s ease-in infinite;
}

.message-toast.disappearing.warning {
  animation: border-pulse 0.8s infinite, red-glow 1.2s ease-in infinite;
}

.message-toast.disappearing.error {
  animation: border-pulse 0.8s infinite, red-glow 1.2s ease-in infinite;
}

/* Disappearing auth message animation */
.message-toast.disappearing.auth {
  animation: border-pulse 0.8s infinite, red-glow 1.2s ease-in infinite;
}

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

/* Mobile responsiveness */
@media screen and (max-width: 576px) {
  .message-wrapper {
    bottom: 20px;
    top: auto;
    left: 20px;
  }
  
  .message-toast {
    transform: translateY(120%);
    animation: slide-up 0.4s forwards cubic-bezier(0.3, 0, 0.3, 1);
  }

  .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 {
    to { transform: translateY(120%); }
  }
}