@import 'react-day-picker/style.css';
@import 'react-datepicker/dist/react-datepicker.css';

/* Fullscreen SPA layout: lock viewport scroll so the app shell controls its
   own scrollable regions. */
html,
body,
#root {
  width: 100%;
  margin: 0;
  overflow: clip;
}

/* Suppress the document-level rubber-band / pull-to-refresh so the app shell
   feels native. Inner overflow-y-auto regions still scroll normally.
   Platform-only: the docs and web sites want native rubber-band scroll. */
html,
body {
  overscroll-behavior: none;
}

/* Short fade for content swapping in behind a skeleton (QueryState). Reuses the
   shared `fade-in` keyframe + easing token from @tale/ui globals. */
.animate-content-in {
  animation: fade-in 200ms var(--ease-out-quint) both;
}

/* Post-answer toolbar entrance: the toolbar is its own reveal segment, so it
   enters with the same fade + lift as streamed blocks (`stream-block-in` is
   defined in @tale/ui globals). */
.animate-toolbar-in {
  animation: stream-block-in 520ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* Chat "thinking" dots: a gentle staggered pulse (opacity + tiny lift) instead
   of Tailwind's full-height `animate-bounce`, which reads as jumpy. Each dot
   spends most of the cycle at rest so the wave glides across the three dots. */
@keyframes thinking-dot {
  0%,
  55%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  25% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.animate-thinking-dot {
  animation: thinking-dot 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Indeterminate sweep for the top-of-page navigation progress bar. */
@keyframes route-progress {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(300%);
  }
}

.animate-route-progress {
  animation: route-progress 1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-content-in {
    animation: none;
  }
  .animate-toolbar-in {
    animation: none;
  }
  .animate-route-progress {
    animation: none;
    transform: none;
  }
  .animate-thinking-dot {
    animation: none;
    opacity: 0.7;
    transform: none;
  }
}
