/* Inline notification styles for credit gating */

.notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  width: min(560px, calc(100% - 40px));
  pointer-events: none; /* Do not block underlying UI */
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  animation: slideDownFade 300ms ease-out;
  pointer-events: auto; /* Allow clicks on controls */
}

/* Type variants */
.notification-info .notification-content {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  color: #1e40af;
}

.notification-warning .notification-content {
  background: #fff7ed;
  border-left: 4px solid #f59e0b;
  color: #92400e;
}

.notification-error .notification-content {
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  color: #7f1d1d;
}

.notification-success .notification-content {
  background: #ecfdf5;
  border-left: 4px solid #10b981;
  color: #065f46;
}

/* Icon and message */
.notification-content i {
  font-size: 18px;
}

.notification-content span {
  flex: 1;
  font-weight: 500;
}

/* Close button */
.notification-close {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.notification-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Action button */
.notification-action {
  background: #667eea;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.notification-action:hover {
  background: #5a67d8;
  transform: translateY(-1px);
}

@keyframes slideDownFade {
  0% { opacity: 0; transform: translate(-50%, -8px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}