/* CSS for transient toast notifications shown by showToast() in utils.js.
 *
 * Toasts stack in a top-right container that's appended to <body> on the
 * first call. The container is purely visual — toast lifecycle is owned by
 * the JavaScript side, which handles auto-dismiss timers and explicit
 * dismiss via the close button.
 */

.app-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 120000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.app-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 220px;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 0.95em;
  line-height: 1.35;
  transform: translateX(0);
  opacity: 1;
  transition:
    transform 0.2s ease-out,
    opacity 0.2s ease-out;
}

.app-toast--leaving {
  transform: translateX(120%);
  opacity: 0;
}

.app-toast--info {
  background: #2962ff;
}

.app-toast--warning {
  background: #ff9800;
}

.app-toast--error {
  background: #c62828;
}

.app-toast__message {
  flex: 1;
  word-break: break-word;
  /* Long URLs / paths shouldn't blow out the toast width */
  overflow-wrap: anywhere;
}

.app-toast__close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.05em;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0.75;
}

.app-toast__close:hover,
.app-toast__close:focus {
  opacity: 1;
  outline: none;
}