/* Toast Notification Styles */

:root {
  --toast-bg: #ffffff;
  --toast-border-color: rgba(0, 0, 0, 0.07);
  --toast-shadow: 0 4px 24px rgba(0, 0, 0, 0.09), 0 1px 4px rgba(0, 0, 0, 0.05);
  --toast-title-color: #111827;
  --toast-message-color: #6b7280;
  --toast-control-color: #6b7280;
  --toast-control-hover-color: #374151;
  --toast-close-hover-color: #ef4444;
  --toast-spinner-track: rgba(0, 0, 0, 0.1);
  --toast-action-bg: #f9fafb;
  --toast-action-border: #e5e7eb;
  --toast-action-color: #111827;
  --toast-action-hover-bg: #f3f4f6;
  --toast-action-hover-border: #d1d5db;
  --toast-danger-color: #dc2626;
  --toast-danger-border: #fca5a5;
  --toast-danger-bg: #fff5f5;
  --toast-danger-hover-bg: #fee2e2;
  --toast-danger-hover-border: #ef4444;
  --toast-primary-bg: #3b82f6;
  --toast-primary-border: #3b82f6;
  --toast-primary-hover-bg: #2563eb;
  --toast-primary-hover-border: #2563eb;
  --toast-primary-color: #ffffff;
  --toast-footer-border: rgba(0, 0, 0, 0.06);
  --toast-timer-color: #9ca3af;
  --toast-countdown-color: #6b7280;
  --toast-stop-color: #6b7280;
  --toast-stop-hover-color: #374151;
  --toast-progress-track: rgba(0, 0, 0, 0.06);
  --toast-count-bg: rgba(0, 0, 0, 0.06);
  --toast-count-color: #6b7280;
  --toast-tools-bg: #ffffff;
}

body.theme-dark {
  --toast-bg: var(--card-bg);
  --toast-border-color: var(--border-color);
  --toast-shadow:
    0 18px 36px rgba(0, 0, 0, 0.5), 0 2px 12px rgba(0, 0, 0, 0.35);
  --toast-title-color: var(--text-color);
  --toast-message-color: var(--muted-text);
  --toast-control-color: var(--muted-text);
  --toast-control-hover-color: var(--text-color);
  --toast-close-hover-color: #fda4af;
  --toast-spinner-track: rgba(255, 255, 255, 0.22);
  --toast-action-bg: var(--info-item-bg);
  --toast-action-border: var(--border-color);
  --toast-action-color: var(--text-color);
  --toast-action-hover-bg: var(--item-hover-bg);
  --toast-action-hover-border: var(--border-color);
  --toast-danger-color: #fecaca;
  --toast-danger-border: rgba(248, 113, 113, 0.62);
  --toast-danger-bg: rgba(127, 29, 29, 0.32);
  --toast-danger-hover-bg: rgba(127, 29, 29, 0.45);
  --toast-danger-hover-border: rgba(248, 113, 113, 0.8);
  --toast-primary-bg: var(--primary-blue);
  --toast-primary-border: var(--primary-blue);
  --toast-primary-hover-bg: var(--primary-blue-hover);
  --toast-primary-hover-border: var(--primary-blue-hover);
  --toast-primary-color: #ffffff;
  --toast-footer-border: var(--border-color);
  --toast-timer-color: var(--muted-text);
  --toast-countdown-color: var(--text-color);
  --toast-stop-color: var(--text-color);
  --toast-stop-hover-color: #ffffff;
  --toast-progress-track: rgba(150, 150, 150, 0.2);
  --toast-count-bg: rgba(255, 255, 255, 0.12);
  --toast-count-color: var(--text-color);
  --toast-tools-bg: var(--card-bg);
}

/* ============================================
   Container & Positioning

   Toasts share one slot: they are absolutely positioned inside the
   container and stacked into a deck by JS (see renderDeck in toast.js).
   The container's height is driven inline to match the current deck.

   The deck only ever grows away from the container's anchored edge (down
   from `top`, up from `bottom`), so the "Clear all" pill hangs off THAT
   edge and stays put no matter how the deck grows, shrinks or expands.
   `.has-tools` shifts the container to open a band for it.
   ============================================ */
.toast-container {
  position: fixed;
  z-index: 100000;
  width: 400px;
  max-width: calc(100vw - 40px);
  pointer-events: none;
  transition:
    height 0.34s cubic-bezier(0.22, 1, 0.3, 1),
    top 0.28s cubic-bezier(0.22, 1, 0.3, 1),
    bottom 0.28s cubic-bezier(0.22, 1, 0.3, 1);
  /* default: top-right */
  top: 20px;
  right: 20px;
}

.toast-container.pos-top-right {
  top: 20px;
  right: 20px;
  bottom: auto;
  left: auto;
}

.toast-container.pos-top-right.has-tools {
  top: 58px;
}

.toast-container.pos-bottom-right {
  bottom: 20px;
  right: 20px;
  top: auto;
  left: auto;
}

.toast-container.pos-bottom-center {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  top: auto;
  right: auto;
}

.toast-container.pos-bottom-right.has-tools,
.toast-container.pos-bottom-center.has-tools {
  bottom: 58px;
}

/* Expanded, the whole deck region is interactive so travelling across the
   gaps between cards does not bounce the stack shut. */
.toast-container.is-expanded {
  pointer-events: auto;
}

/* ============================================
   Toast base
   ============================================ */
.toast {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--toast-bg);
  border-radius: 16px;
  border: 1px solid var(--toast-border-color);
  box-shadow: var(--toast-shadow);
  pointer-events: auto;
  overflow: hidden;
  animation: toastSlideInRight 0.38s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}

.toast-container.pos-top-right .toast {
  top: 0;
  transform-origin: top center;
}

.toast-container.pos-bottom-right .toast,
.toast-container.pos-bottom-center .toast {
  bottom: 0;
  transform-origin: bottom center;
}

/* bottom positions: slide up instead */
.toast-container.pos-bottom-right .toast,
.toast-container.pos-bottom-center .toast {
  animation-name: toastSlideInUp;
}

/* Settled cards drop the entry keyframe so the inline deck transform
   (which a running animation would otherwise outrank) takes effect. */
.toast.is-settled {
  animation: none;
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.3, 1),
    opacity 0.25s ease;
}

/* Buried cards must not swallow clicks aimed at the page. */
.toast.is-buried {
  pointer-events: none;
}

/* ============================================
   Header row (always visible)
   ============================================ */
.toast-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 12px 14px;
}

/* Icon — Font Awesome icon, colored per type */
.toast-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.toast.toast-success .toast-icon {
  color: #22c55e;
}
.toast.toast-error .toast-icon {
  color: #ef4444;
}
.toast.toast-info .toast-icon {
  color: #3b82f6;
}
.toast.toast-warning .toast-icon {
  color: #f59e0b;
}

/* Loading spinner inside .toast-icon */
.toast-loading {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid var(--toast-spinner-track);
  border-top-color: currentColor;
  animation: toastSpin 0.8s linear infinite;
}

/* Title */
.toast-title {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  color: var(--toast-title-color);
  line-height: 1.35;
  min-width: 0;
}

/* Repeat counter — appears when the same toast fires again while live */
.toast-count {
  flex-shrink: 0;
  font-weight: 800;
  font-size: 11.5px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--toast-count-bg);
  color: var(--toast-count-color);
  font-variant-numeric: tabular-nums;
}

.toast.toast-success .toast-count {
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
}
.toast.toast-error .toast-count {
  background: rgba(239, 68, 68, 0.14);
  color: #dc2626;
}
.toast.toast-info .toast-count {
  background: rgba(59, 130, 246, 0.14);
  color: #2563eb;
}
.toast.toast-warning .toast-count {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

body.theme-dark .toast.toast-success .toast-count {
  color: #4ade80;
}
body.theme-dark .toast.toast-error .toast-count {
  color: #fca5a5;
}
body.theme-dark .toast.toast-info .toast-count {
  color: #93c5fd;
}
body.theme-dark .toast.toast-warning .toast-count {
  color: #fcd34d;
}

.toast-count.is-bumped {
  animation: toastCountBump 0.34s cubic-bezier(0.3, 1.4, 0.5, 1);
}

/* Header controls: toggle chevron + close */
.toast-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.toast-toggle,
.toast-close {
  cursor: pointer;
  color: var(--toast-control-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  flex-shrink: 0;
  transition: color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* hard-reset anything Skeleton or browser might inject */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
  text-decoration: none !important;
}

.toast-toggle:hover,
.toast-toggle:focus,
.toast-toggle:focus-visible,
.toast-toggle:active,
.toast-close:hover,
.toast-close:focus,
.toast-close:focus-visible,
.toast-close:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
  text-decoration: none !important;
}

.toast-toggle:hover {
  color: var(--toast-control-hover-color);
}

.toast-close:hover {
  color: var(--toast-close-hover-color);
}

/* Chevron rotation — SVG drawn pointing UP; default state rotated 180° = points down (collapsed) */
.toast-chevron-icon {
  transform: rotate(180deg);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast-toggle.is-expanded .toast-chevron-icon {
  transform: rotate(0deg);
}

/* ============================================
   Expandable body
   ============================================ */
.toast-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast-body-inner {
  /* indent to align with title text */
  padding: 0 14px 14px 52px;
}

.toast-message {
  font-size: 14px;
  color: var(--toast-message-color);
  line-height: 1.6;
  word-wrap: break-word;
  white-space: normal;
}

/* Action buttons row */
.toast-action-row {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.toast-action-btn {
  background: var(--toast-action-bg);
  border: 1px solid var(--toast-action-border);
  border-radius: 9px;
  padding: 7px 18px;
  font-weight: 600;
  font-size: 14px;
  color: var(--toast-action-color);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
  line-height: 1.4;
}

.toast-action-btn:hover {
  background: var(--toast-action-hover-bg);
  border-color: var(--toast-action-hover-border);
}

.toast-action-btn-danger {
  color: var(--toast-danger-color);
  border-color: var(--toast-danger-border);
  background: var(--toast-danger-bg);
}

.toast-action-btn-danger:hover {
  background: var(--toast-danger-hover-bg);
  border-color: var(--toast-danger-hover-border);
}

.toast-action-btn-primary {
  color: var(--toast-primary-color);
  background: var(--toast-primary-bg);
  border-color: var(--toast-primary-border);
}

.toast-action-btn-primary:hover {
  background: var(--toast-primary-hover-bg);
  border-color: var(--toast-primary-hover-border);
}

/* ============================================
   Footer: timer text
   ============================================ */
.toast-footer {
  border-top: 1px solid var(--toast-footer-border);
  padding: 8px 14px 10px;
}

.toast-timer-text {
  font-size: 12.5px;
  color: var(--toast-timer-color);
  line-height: 1.4;
}

.toast-countdown-num {
  font-weight: 700;
  color: var(--toast-countdown-color);
}

.toast-stop-link {
  font-weight: 700;
  color: var(--toast-stop-color);
  cursor: pointer;
  user-select: none;
}

.toast-stop-link:hover {
  color: var(--toast-stop-hover-color);
  text-decoration: underline;
}

/* ============================================
   Clear all pill — hangs off the end of the deck
   ============================================ */
.toast-tools {
  position: absolute;
  left: 0;
  right: 0;
  display: none;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 1001;
}

.toast-container.has-tools .toast-tools {
  display: flex;
}

/* Top-anchored deck grows downward, so the pill lives above it. */
.toast-container.pos-top-right .toast-tools {
  bottom: 100%;
  margin-bottom: 10px;
}

/* Bottom-anchored deck grows upward, so the pill lives below it. */
.toast-container.pos-bottom-right .toast-tools,
.toast-container.pos-bottom-center .toast-tools {
  top: 100%;
  margin-top: 10px;
}

.toast-container.pos-bottom-center .toast-tools {
  justify-content: center;
}

.toast-clearall {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--toast-border-color);
  background: var(--toast-tools-bg);
  box-shadow: var(--toast-shadow);
  color: var(--toast-message-color);
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease;
  animation: toastFadeIn 0.26s ease both;
}

.toast-clearall:hover,
.toast-clearall:focus-visible {
  color: var(--toast-title-color);
  outline: none;
}

/* ============================================
   Progress bar (at very bottom)
   ============================================ */
.toast-progress {
  height: 4px;
  background: var(--toast-progress-track);
  overflow: hidden;
}

.toast-progress-fill {
  height: 100%;
  width: 100%;
  transform-origin: left;
  animation: toastProgress linear;
}

.toast.toast-success .toast-progress-fill {
  background: #22c55e;
}
.toast.toast-error .toast-progress-fill {
  background: #ef4444;
}
.toast.toast-info .toast-progress-fill {
  background: #3b82f6;
}
.toast.toast-warning .toast-progress-fill {
  background: #f59e0b;
}

/* Collapsed, only the front card's timer bar reads as live; expanded, every
   card shows its own (all frozen, since hovering the deck pauses them). */
.toast .toast-progress {
  transition: opacity 0.2s ease;
}

.toast:not(.is-front) .toast-progress {
  opacity: 0;
}

.toast-container.is-expanded .toast .toast-progress {
  opacity: 1;
}

/* ============================================
   Animations
   ============================================ */
@keyframes toastSlideInRight {
  from {
    transform: translateX(110%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toastSlideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(110%);
    opacity: 0;
  }
}

@keyframes toastSlideInUp {
  from {
    transform: translateY(80px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes toastSlideOutDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(80px);
    opacity: 0;
  }
}

@keyframes toastSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes toastProgress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@keyframes toastCountBump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes toastFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Slide-out classes */
.toast.toast-sliding-out {
  animation: toastSlideOutRight 0.3s ease-in forwards;
  pointer-events: none;
}

.toast-container.pos-bottom-right .toast.toast-sliding-out,
.toast-container.pos-bottom-center .toast.toast-sliding-out {
  animation-name: toastSlideOutDown;
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.toast-sliding-out {
    animation: toastFadeIn 0.2s ease both;
  }
  .toast.is-settled {
    transition: opacity 0.2s ease;
  }
  .toast-container {
    transition: none;
  }
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 480px) {
  .toast-container,
  .toast-container.pos-top-right,
  .toast-container.pos-bottom-right,
  .toast-container.pos-bottom-center {
    top: auto;
    bottom: 10px;
    right: 10px;
    left: 10px;
    width: auto;
    max-width: none;
    transform: none;
  }

  .toast-container.pos-top-right.has-tools,
  .toast-container.pos-bottom-right.has-tools,
  .toast-container.pos-bottom-center.has-tools {
    top: auto;
    bottom: 48px;
  }

  /* narrow viewports anchor to the bottom, so the deck grows upward */
  .toast-container .toast {
    top: auto;
    bottom: 0;
    transform-origin: bottom center;
    animation-name: toastSlideInUp;
  }

  /* bottom-anchored here too, so the pill hangs below the deck */
  .toast-container.pos-top-right .toast-tools,
  .toast-container.pos-bottom-right .toast-tools,
  .toast-container.pos-bottom-center .toast-tools {
    top: 100%;
    bottom: auto;
    margin-top: 10px;
    margin-bottom: 0;
    justify-content: flex-end;
  }

  .toast-container .toast.toast-sliding-out {
    animation-name: toastSlideOutDown;
  }
}

/* Fallback label for AI jobs whose op_type isn't registered in
   OPERATION_LABELS. Rendered muted-italic so it reads as "missing
   description" rather than "broken AI". Theme-agnostic: uses the
   shared --muted-text variable (falls back to a neutral gray). */
.toast-label-missing {
  color: var(--muted-text, #9ca3af);
  font-style: italic;
  letter-spacing: 0;
}