@import 'tailwindcss';
@import 'tw-animate-css';
@plugin '@tailwindcss/typography';

@source '../../index.html';
@source '../**/*.{js,ts,jsx,tsx}';

@theme {
  --breakpoint-md: 930px;
}

/* Cash Sans */

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --shadow-*: initial;

  --color-white: #ffffff;
  --color-black: #000000;

  --color-block-teal: #13bbaf;
  --color-block-orange: #ff4f00;

  --color-neutral-50: #f4f6f7;
  --color-neutral-100: #e3e6ea;
  --color-neutral-200: #cbd1d6;
  --color-neutral-300: #a7b0b9;
  --color-neutral-400: #878787;
  --color-neutral-500: #606c7a;
  --color-neutral-600: #525b68;
  --color-neutral-700: #474e57;
  --color-neutral-800: #3f434b;
  --color-neutral-900: #32353b;
  --color-neutral-950: #22252a;

  --color-red-100: #ff6b6b;
  --color-red-200: #f94b4b;

  --color-blue-100: #7cacff;
  --color-blue-200: #5c98f9;

  --color-green-100: #a3d795;
  --color-green-200: #91cb80;

  --color-yellow-100: #ffd966;
  --color-yellow-200: #fbcd44;

  --color-accent: var(--color-neutral-900);
}

:root {
  /* fonts */
  --font-sans: 'Cash Sans', sans-serif;
  --font-mono: monospace;

  /* theming accents */
  --background-accent: var(--color-accent);
  --border-accent: var(--color-accent);
  --text-accent: var(--color-accent);
  --text-on-accent: var(--color-white);

  /* Semantic */
  --background-default: var(--color-white);
  --background-muted: var(--color-neutral-50);
  --background-medium: var(--color-neutral-100);
  --background-inverse: var(--color-black);
  --background-danger: var(--color-red-200);
  --background-info: var(--color-blue-200);

  --border-default: var(--color-neutral-100);
  --border-strong: var(--color-neutral-100);
  --border-danger: var(--color-red-200);
  --border-info: var(--color-blue-200);

  --text-default: var(--color-neutral-800);
  --text-muted: var(--color-neutral-600);
  --text-inverse: var(--color-white);
  --text-danger: var(--color-red-200);
  --text-success: var(--color-green-200);
  --text-warning: var(--color-yellow-200);
  --text-info: var(--color-blue-200);

  --placeholder: var(--color-neutral-400);

  --ring: var(--border-strong);

  /* Search highlighting */
  --highlight-color: rgba(255, 213, 0, 0.5);
  --highlight-current: rgba(252, 213, 3, 0.6);

  --sidebar: var(--background-muted);
  --sidebar-foreground: var(--text-default);
  --sidebar-primary: var(--background-accent);
  --sidebar-primary-foreground: var(--text-inverse);
  --sidebar-accent: var(--background-muted);
  --sidebar-accent-foreground: var(--text-default);
  --sidebar-border: var(--border-default);
  --sidebar-ring: var(--border-default);

  /* custom shadow */

  --shadow-default:
    0px 12px 32px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.02),
    0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
}

.dark {
  /* theming accents */
  --background-accent: var(--color-white);
  --border-accent: var(--color-white);
  --text-accent: var(--color-white);
  --text-on-accent: var(--color-black);

  /* semantic */
  --background-default: var(--color-neutral-950);
  --background-muted: var(--color-neutral-800);
  --background-medium: var(--color-neutral-700);
  --background-inverse: var(--color-neutral-200);
  --background-danger: var(--color-red-100);
  --background-info: var(--color-blue-100);

  --border-default: var(--color-neutral-800);
  --border-strong: var(--color-neutral-600);
  --border-danger: var(--color-red-100);
  --border-info: var(--color-blue-100);

  --text-default: var(--color-white);
  --text-muted: var(--color-neutral-300);
  --text-inverse: var(--color-black);
  --text-danger: var(--color-red-100);
  --text-success: var(--color-green-100);
  --text-warning: var(--color-yellow-100);
  --text-info: var(--color-blue-100);

  --placeholder: var(--color-neutral-400);

  --ring: var(--border-strong);

  /* Search highlighting */
  --highlight-color: rgba(255, 213, 0, 0.5);
  --highlight-current: rgba(252, 213, 3, 0.6);

  --sidebar: var(--background-muted);
  --sidebar-foreground: var(--text-default);
  --sidebar-primary: var(--background-accent);
  --sidebar-primary-foreground: var(--text-inverse);
  --sidebar-accent: var(--background-muted);
  --sidebar-accent-foreground: var(--text-default);
  --sidebar-border: var(--border-default);
  --sidebar-ring: var(--border-default);

  --shadow-default:
    0px 12px 32px 0px rgba(0, 0, 0, 0.2), 0px 8px 16px 0px rgba(0, 0, 0, 0.15),
    0px 2px 4px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.3);
}

@theme inline {
  --ease-g2: cubic-bezier(0.55, 0, 1, 0.45);

  --color-background-default: var(--background-default);
  --color-background-muted: var(--background-muted);
  --color-background-medium: var(--background-medium);
  --color-background-inverse: var(--background-inverse);
  --color-background-danger: var(--background-danger);
  --color-background-info: var(--background-info);

  --color-background-accent: var(--background-accent);
  --color-border-accent: var(--border-accent);
  --color-text-accent: var(--text-accent);
  --color-text-on-accent: var(--text-on-accent);

  --color-border-default: var(--border-default);
  --color-border-strong: var(--border-strong);
  --color-border-danger: var(--border-danger);
  --color-border-info: var(--border-info);

  --color-text-default: var(--text-default);
  --color-text-muted: var(--text-muted);
  --color-text-inverse: var(--text-inverse);
  --color-text-danger: var(--text-danger);
  --color-text-warning: var(--text-warning);
  --color-text-info: var(--text-info);

  --font-sans: 'Cash Sans', sans-serif;
  --font-mono: monospace;
  --font-serif: serif;

  --color-ring: var(--ring);

  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);

  --shadow-default: var(--shadow-default);
}

@layer base {
  * {
    @apply border-border-default;
  }
  body {
    @apply text-text-default;
  }
}

@font-face {
  font-family: 'Cash Sans';
  src:
    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Light.woff2)
      format('woff2'),
    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Light.woff) format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Cash Sans';
  src:
    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Regular.woff2)
      format('woff2'),
    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Regular.woff)
      format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Cash Sans';
  src:
    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Medium.woff2)
      format('woff2'),
    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Medium.woff) format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Cash Sans';
  src:
    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Bold.woff2)
      format('woff2'),
    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Bold.woff) format('woff');
  font-weight: 700;
  font-style: normal;
}

/* animations */
@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sidebar-item-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes wind {
  0% {
    transform: translate(0, 0);
  }
  99.99% {
    transform: translate(-100%, 100%);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* Non-blocking sidebar animations */
.sidebar-item {
  /* Start hidden and positioned to the right */
  opacity: 0;
  transform: translateX(20px);
  animation: sidebar-item-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  /* Use will-change sparingly and remove after animation */
  will-change: transform, opacity;
}

.sidebar-item:nth-child(1) {
  animation-delay: 0.05s;
}
.sidebar-item:nth-child(2) {
  animation-delay: 0.2s;
}
.sidebar-item:nth-child(3) {
  animation-delay: 0.4s;
}
.sidebar-item:nth-child(4) {
  animation-delay: 0.45s;
}
.sidebar-item:nth-child(5) {
  animation-delay: 0.5s;
}
.sidebar-item:nth-child(6) {
  animation-delay: 0.25s;
}
.sidebar-item:nth-child(7) {
  animation-delay: 0.5s;
}

/* Remove will-change after animation completes */
.sidebar-item {
  animation-fill-mode: forwards;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-item {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Global reduced motion support - applies when user has system preference set */
@media (prefers-reduced-motion: reduce) {
  /* Disable all CSS animations and transitions, except for toasts which need transitions for auto-dismiss */
  *:not(.Toastify *),
  *:not(.Toastify *)::before,
  *:not(.Toastify *)::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Specific animation classes that should be disabled */
  .animate-shimmer,
  .animate-spin,
  .animate-pulse,
  .animate-bounce,
  [class*='animate-']:not(.Toastify *) {
    animation: none !important;
  }

  /* Page transitions */
  .page-transition {
    animation: none !important;
    opacity: 1 !important;
  }

  /* Goose icon entrance animation */
  .goose-icon-entrance {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Wind/rain animation in welcome logo */
  [class*='animate-[wind'] {
    animation: none !important;
  }

  /* Elements that use opacity-0 with appear animation need to be visible when animations are disabled */
  .opacity-0[class*='animate-'] {
    opacity: 1 !important;
  }
}

/* Toast close button styling */
.Toastify__close-button {
  color: var(--text-inverse) !important;
  opacity: 0.7;
  align-self: center;
  margin-top: 0;
  margin-right: 8px;
  padding: 4px;
  border-radius: 4px;
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease;
}

.Toastify__close-button:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
}

.Toastify__close-button:focus {
  outline: 2px solid var(--color-block-teal);
  outline-offset: 2px;
}

/* Ensure close button is visible on all toast types */
.Toastify__toast--success .Toastify__close-button,
.Toastify__toast--error .Toastify__close-button,
.Toastify__toast--info .Toastify__close-button,
.Toastify__toast--warning .Toastify__close-button,
.Toastify__toast--default .Toastify__close-button {
  color: var(--text-inverse) !important;
}

.animate-fade-slide-up {
  animation: fade-slide-up 0.15s ease-out forwards;
}

/* Hide native scrollbars in Radix ScrollArea (custom scrollbar will show instead) */
[data-radix-scroll-area-viewport] {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

[data-radix-scroll-area-viewport]::-webkit-scrollbar {
  display: none;
}

/* Override Radix UI ScrollArea styles */
[data-radix-scroll-area-viewport] > div {
  display: block !important;
}

/* Native scrollbar styling */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--color-neutral-200) transparent;
}

.dark * {
  scrollbar-color: var(--color-neutral-400) transparent;
}

/* Webkit scrollbar styles */
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 12px; /* Increased from 8px */
  height: 12px;
  background-color: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-neutral-200);
  border: 3px solid transparent; /* Creates padding effect */
  border-radius: 8px;
  background-clip: padding-box;
  min-height: 40px; /* Minimum height of thumb */
}

.dark ::-webkit-scrollbar-thumb {
  background-color: var(--color-neutral-400);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-neutral-300);
  border: 2px solid transparent; /* Slightly less padding on hover */
}

.dark ::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-neutral-500);
}

/* Ensure the thumb is more prominent when active */
::-webkit-scrollbar-thumb:active {
  background-color: var(--color-neutral-400);
  border: 2px solid transparent;
}

.dark ::-webkit-scrollbar-thumb:active {
  background-color: var(--color-neutral-500);
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-neutral-200);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--color-neutral-400);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-300);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-500);
}

body {
  background-color: var(--background-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.word-break {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.titlebar-drag-region {
  -webkit-app-region: drag;
  height: 32px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
}

.no-drag {
  -webkit-app-region: no-drag;
}

.bg-inline-code {
  border-radius: 4px;
  color: var(--color-neutral-200);
  font-family: monospace;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.bg-inline-code:before {
  content: '';
}

pre:has(> code.bg-inline-code) {
  padding: 1em;
}

li > code.bg-inline-code,
p > code.bg-inline-code {
  color: var(--color-block-orange);
  padding: 2px 4px;
}

.bg-inline-code:after {
  content: '';
}

.user-message p {
  margin-bottom: 0 !important;
}

.scrollbar-thin {
  scrollbar-width: thin;
}

.assistant:has(+ .user):not(.in-chain) .goose-message {
  padding-bottom: 24px;
}

/* Sidebar scrollbar styles */
.sidebar-scrollbar {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.dark .sidebar-scrollbar {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.sidebar-scrollbar::-webkit-scrollbar {
  width: 6px;
  position: absolute;
  right: 0;
}

.sidebar-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

.sidebar-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  border: none;
}

.dark .sidebar-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
}

.sidebar-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.dark .sidebar-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Virtualized list styles */
.virtualized-list {
  scrollbar-width: thin;
  scrollbar-color: var(--color-neutral-300) transparent;
}

.virtualized-list::-webkit-scrollbar {
  width: 8px;
}

.virtualized-list::-webkit-scrollbar-track {
  background: transparent;
}

.virtualized-list::-webkit-scrollbar-thumb {
  background-color: var(--color-neutral-300);
  border-radius: 4px;
}

.dark .virtualized-list::-webkit-scrollbar-thumb {
  background-color: var(--color-neutral-400);
}

.virtualized-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-neutral-400);
}

.dark .virtualized-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-neutral-300);
}

/* Ensure virtualized items don't have margin/padding that could break layout */
.virtualized-list > div {
  outline: none;
}

/* Optimize performance for virtualized rendering */
.virtualized-list * {
  contain: layout style paint;
}

/* Goose icon animation to replace framer-motion */
@keyframes goose-icon-entrance {
  from {
    opacity: 0;
    transform: scale(0.25) translate(-5px, 5px) rotate(-20deg);
  }
  to {
    opacity: 1;
    transform: scale(1) translate(0, 0) rotate(0deg);
  }
}

.goose-icon-animation {
  animation: goose-icon-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: bottom left;
}

/* Optimize session skeleton loading */
.session-skeleton {
  contain: layout style paint;
  /* Prevent layout thrashing during loading */
  min-height: 140px;
}

/* Ensure navigation is always responsive */
[data-slot='sidebar-menu-button'] {
  /* Ensure buttons are always clickable during transitions */
  pointer-events: auto !important;
  /* Optimize for interaction */
  touch-action: manipulation;
}

/* Ensure all navigation buttons are immediately responsive */
.sidebar-item button,
.sidebar-item a,
[data-slot='sidebar-menu-button'] {
  pointer-events: auto !important;
  /* Prevent any blocking during animations */
  will-change: auto;
}

/* Override any blocking pointer events during animations */
.sidebar-item,
.sidebar-item * {
  pointer-events: auto !important;
}

/* Optimize route transitions for better performance */
.route-container {
  /* Use hardware acceleration for smoother transitions */
  transform: translateZ(0);
  backface-visibility: hidden;
  /* Optimize for content changes */
  contain: layout style paint;
}

/* Non-blocking page transitions */
@keyframes page-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.page-transition {
  /* Start with proper initial state to prevent flicker */
  opacity: 0;
  animation: page-fade-in 0.08s ease-out forwards;
  /* Don't block interactions during animation */
  pointer-events: auto;
}

/* Sidebar transition optimizations */
[data-slot='sidebar-container'] {
  /* Promote to composite layer for smoother animations */
  transform: translateZ(0);
  backface-visibility: hidden;
  /* Optimize for transform animations */
  will-change: transform;
}

[data-slot='sidebar-gap'] {
  /* Optimize for width animations */
  will-change: width;
}

/* Remove will-change when not transitioning to save memory */
[data-state='expanded'] [data-slot='sidebar-container'],
[data-state='collapsed'] [data-slot='sidebar-container'] {
  will-change: auto;
}

[data-state='expanded'] [data-slot='sidebar-gap'],
[data-state='collapsed'] [data-slot='sidebar-gap'] {
  will-change: auto;
}

/* Ensure smooth transitions during state changes */
[data-state='expanded'] [data-slot='sidebar-container'],
[data-state='collapsed'] [data-slot='sidebar-container'] {
  will-change: transform;
}

[data-state='expanded'] [data-slot='sidebar-gap'],
[data-state='collapsed'] [data-slot='sidebar-gap'] {
  will-change: width;
}

/* Subtle back-and-forth shimmer animation for onboarding card */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  20% {
    opacity: 0.15;
  }
  50% {
    transform: translateX(100%);
    opacity: 0.05;
  }
  80% {
    opacity: 0.15;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.animate-shimmer {
  animation: shimmer 6s ease-in-out infinite;
}

/* KaTeX Math Rendering */

.prose .katex {
  font-size: 1.05em;
  color: inherit;
}

.katex-display {
  margin: 0.75em 0;
  padding: 1em;
  background-color: var(--background-muted);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  text-align: center;
}

.katex-display .katex {
  color: var(--color-neutral-800);
}

.dark .katex-display .katex {
  color: #e6e6e6;
}

.katex-error {
  color: var(--text-danger);
}

/* Search Highlighting Styles */
.search-highlight {
  background-color: var(--highlight-color);
  color: var(--text-default);
  padding: 0;
  border-radius: 2px;
}

.search-highlight.current {
  background-color: var(--highlight-current);
  box-shadow: inset 0 0 0 1px var(--text-default);
  z-index: 2;
}

/* Search Bar Animations */
@keyframes expandDown {
  from {
    max-height: 0;
  }
  to {
    max-height: var(--search-bar-height);
  }
}

@keyframes collapseUp {
  from {
    max-height: var(--search-bar-height);
  }
  to {
    max-height: 0;
  }
}

.search-bar-enter {
  --search-bar-height: 72px;
  animation: expandDown 0.15s ease-out forwards;
  overflow: hidden;
}

.search-bar-exit {
  --search-bar-height: 72px;
  animation: collapseUp 0.15s ease-out forwards;
  overflow: hidden;
}

/* Reduced motion support for search animations */
@media (prefers-reduced-motion: reduce) {
  .search-bar-enter,
  .search-bar-exit {
    animation: none;
    max-height: var(--search-bar-height);
  }
}