/* Custom styles layered on top of Tailwind (loaded via CDN).
   Scope: things Tailwind utilities don't cover cleanly — dropzone, toasts,
   spinners, scrollbars, and a couple of subtle transitions. */

:root {
  --accent: #7c5cff;
  --accent-soft: rgba(124, 92, 255, 0.14);
}

html { scroll-behavior: smooth; }

/* Guard against any horizontal page overflow (does not affect the sticky header,
   unlike overflow:hidden). */
html, body { overflow-x: clip; max-width: 100%; }

body {
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

/* Dropzone */
.dropzone {
  transition: border-color .15s ease, background-color .15s ease, transform .05s ease;
}
.dropzone.dragover {
  border-color: var(--accent);
  background-color: var(--accent-soft);
}

/* Status dot pulse */
.dot-pulse { position: relative; }
.dot-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 2px solid currentColor;
  opacity: .35;
  animation: dotPulse 1.8s ease-out infinite;
}
@keyframes dotPulse {
  0%   { transform: scale(.6); opacity: .5; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Spinner */
.spinner {
  width: 1rem; height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 9999px;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toasts */
#toasts {
  position: fixed;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  right: 1.25rem;
  display: flex; flex-direction: column; gap: .5rem;
  z-index: 60; max-width: 24rem;
}
@media (max-width: 480px) {
  #toasts { left: 0.75rem; right: 0.75rem; max-width: none; }
}
.toast {
  padding: .75rem 1rem;
  border-radius: .6rem;
  font-size: .875rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  animation: toastIn .18s ease-out;
  border: 1px solid transparent;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Progress bar */
.progress-track { overflow: hidden; }
.progress-bar { transition: width .2s ease; }

/* Subtle row hover */
tbody tr { transition: background-color .12s ease; }

/* Thin scrollbars */
* { scrollbar-width: thin; }
*::-webkit-scrollbar { height: 8px; width: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(124,92,255,.35); border-radius: 8px; }

/* Code blocks */
.code-block {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .8rem;
  line-height: 1.5;
  /* Wrap long URLs / keys / commands instead of forcing the layout wide. */
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}