:root {
  /* Notification colors */
  --notification-error-bg: #fff0fb;
  --notification-error-border: #FFB6FF;
  --notification-error-text: #D46CDB;
  
  --notification-success-bg: #e9f9ef;
  --notification-success-border: #34c759;
  --notification-success-text: #1d7d38;
  
  --notification-warning-bg: #fff8e6;
  --notification-warning-border: #ffb74d;
  --notification-warning-text: #b25000;
  
  --notification-info-bg: #e9f5ff;
  --notification-info-border: #4dabf7;
  --notification-info-text: #0063cc;
}

/* Notification system */
.notification {
  padding: 1rem;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start; /* Changed from center to allow content to expand vertically */
  gap: 0.75rem;
  animation: fadeIn 0.3s ease-in-out;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  min-height: 3.5rem; /* Added minimum height to ensure consistent appearance */
}

/* Global notification container - fixed at top center */
.global-notification-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 500px;
  pointer-events: none; /* Allow clicking through the container */
}

.global-notification-container .notification {
  pointer-events: auto; /* Make the actual notifications clickable */
  width: 100%;
}

/* Legacy notification containers - keep for backward compatibility */
.notification-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 1rem;
}

.auth-notification-container {
  position: relative;
  width: 100%;
}

.notification-container.hidden,
.global-notification-container.hidden {
  display: none;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.notification.fade-out {
  opacity: 0;
  transform: translateY(-10px);
}

.notification-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem; /* Slight adjustment to align with first line of text */
  display: inline-block;
  background-color: currentColor; /* take color from notification type */
}

.notification-content {
  flex-grow: 1;
  word-wrap: break-word; /* Added to ensure text wraps by words */
  overflow-wrap: break-word; /* Added for better browser compatibility */
  word-break: normal; /* Ensures words break at appropriate points */
  hyphens: none; /* Prevent hyphenation, move words to next line instead */
  padding-right: 2rem; /* Added to prevent text from overlapping with close button */
}

.notification-close {
  position: absolute;
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Perfect vertical centering */
  right: 0.75rem;
  width: 24px; /* Increased from 20px */
  height: 24px; /* Increased from 20px */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
  color: var(--gray-700);
  transition: opacity 0.2s ease;
}

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

.notification-close svg {
  width: 18px; /* Increased from 14px */
  height: 18px; /* Increased from 14px */
  fill: currentColor;
}

/* Icon masks using external SVGs */
.icon-success { -webkit-mask: url('/static/img/success.svg') no-repeat center / contain; mask: url('/static/img/success.svg') no-repeat center / contain; }
.icon-error { -webkit-mask: url('/static/img/error.svg') no-repeat center / contain; mask: url('/static/img/error.svg') no-repeat center / contain; }
.icon-warning { -webkit-mask: url('/static/img/warning.svg') no-repeat center / contain; mask: url('/static/img/warning.svg') no-repeat center / contain; }
.icon-info { -webkit-mask: url('/static/img/info.svg') no-repeat center / contain; mask: url('/static/img/info.svg') no-repeat center / contain; }
.icon-close { display:inline-block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: url('/static/img/notification-icon-close.svg') no-repeat center / contain; mask: url('/static/img/notification-icon-close.svg') no-repeat center / contain; }

/* Ensure icon inherits per-type color */
.notification.error .notification-icon,
.notification.success .notification-icon,
.notification.warning .notification-icon,
.notification.info .notification-icon,
.notification-critical .notification-icon {
  color: inherit;
}

.notification.error {
  background: var(--notification-error-bg);
  border-left: 4px solid var(--notification-error-border);
  color: var(--notification-error-text);
}

.notification.success {
  background: var(--notification-success-bg);
  border-left: 4px solid var(--notification-success-border);
  color: var(--notification-success-text);
}

.notification.warning {
  background: var(--notification-warning-bg);
  border-left: 4px solid var(--notification-warning-border);
  color: var(--notification-warning-text);
}

.notification.info {
  background: var(--notification-info-bg);
  border-left: 4px solid var(--notification-info-border);
  color: var(--notification-info-text);
}