/* ==========================================================================
   Toast Notifications
   ========================================================================== */
.toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1000;
  pointer-events: none;
}

.toast-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(15, 23, 42, 0.92);
  color: #ffffff;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.toast-pill.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast-pill.hiding {
  opacity: 0;
  transform: translateY(-8px) scale(0.95);
}

.toast-pill svg {
  flex-shrink: 0;
}

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

@media (max-width: 1200px) {
  #btn-copy-svg .btn-text,
  #btn-share-link .btn-text {
    display: none;
  }
  #btn-copy-svg,
  #btn-share-link {
    padding: 0.38rem 0.5rem;
  }
  .route-pill {
    max-width: 240px;
  }
}

@media (max-width: 1100px) {
  .route-pill {
    max-width: 180px;
  }
  .stage-zoom-controls .zoom-btn[data-zoom="actual"],
  .stage-zoom-controls #btn-reset-labels {
    display: none;
  }
}

@media (max-width: 1024px) {
  #btn-export-svg .btn-text,
  #btn-export-png .btn-text {
    display: none;
  }
  #btn-export-svg,
  #btn-export-png {
    padding: 0.38rem 0.5rem;
  }
}

@media (max-width: 960px) {
  .route-pill {
    display: none;
  }
  #btn-print .btn-text {
    display: none;
  }
  #btn-print {
    padding: 0.38rem 0.55rem;
  }
  header.app-header {
    padding: 0 0.85rem;
    gap: 0.6rem;
  }
}