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

@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: 'Cash Sans 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-app: var(--color-white);
  --background-default: var(--color-white);
  --background-card: var(--color-white);
  --background-muted: var(--color-neutral-50);
  --background-medium: var(--color-neutral-100);
  --background-strong: var(--color-neutral-300);
  --background-inverse: var(--color-black);
  --background-danger: var(--color-red-200);
  --background-success: var(--color-green-200);
  --background-info: var(--color-blue-200);
  --background-warning: var(--color-yellow-200);

  --border-default: var(--color-neutral-100);
  --border-input: var(--color-neutral-100);
  --border-strong: var(--color-neutral-100);
  --border-danger: var(--color-red-200);
  --border-success: var(--color-green-200);
  --border-warning: var(--color-yellow-200);
  --border-info: var(--color-blue-200);

  --text-default: var(--color-neutral-800);
  --text-muted: var(--color-neutral-400);
  --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);

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

  --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-app: var(--color-neutral-950);
  --background-default: var(--color-neutral-950);
  --background-card: var(--color-neutral-950);
  --background-muted: var(--color-neutral-800);
  --background-medium: var(--color-neutral-700);
  --background-strong: var(--color-neutral-600);
  --background-inverse: var(--color-neutral-200);
  --background-danger: var(--color-red-100);
  --background-success: var(--color-green-100);
  --background-info: var(--color-blue-100);
  --background-warning: var(--color-yellow-100);

  --border-default: var(--color-neutral-900);
  --border-input: var(--color-neutral-800);
  --border-strong: var(--color-neutral-700);
  --border-danger: var(--color-red-100);
  --border-success: var(--color-green-100);
  --border-warning: var(--color-yellow-100);
  --border-info: var(--color-blue-100);

  --text-default: var(--color-white);
  --text-muted: var(--color-neutral-400);
  --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);

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

  --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-strong: var(--background-strong);
  --color-background-inverse: var(--background-inverse);
  --color-background-danger: var(--background-danger);
  --color-background-success: var(--background-success);
  --color-background-info: var(--background-info);
  --color-background-warning: var(--background-warning);
  --color-background-card: var(--background-card);

  --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-input: var(--border-input);
  --color-border-strong: var(--border-strong);
  --color-border-danger: var(--border-danger);
  --color-border-success: var(--border-success);
  --color-border-warning: var(--border-warning);
  --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-success: var(--text-success);
  --color-text-warning: var(--text-warning);
  --color-text-info: var(--text-info);

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

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

  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-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;
}

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

@font-face {
  font-family: 'Cash Sans Mono';
  src:
    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSansMono-Light.woff2)
      format('woff2'),
    url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSansMono-Light.woff)
      format('woff');
  font-weight: 300;
  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;
  }
}

/* Toast close button styling */
.Toastify__close-button {
  color: var(--text-prominent-inverse) !important;
  opacity: 0.7;
  align-self: flex-start;
  margin-top: 4px;
  margin-right: 4px;
  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-prominent-inverse) !important;
}

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

/* Force scrollbars to be visible */
[data-radix-scroll-area-viewport] {
  scrollbar-width: auto !important;
  -ms-overflow-style: auto !important;
}

/* 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-app);
  -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: 'Cash Sans Mono', 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) .goose-message {
  padding-bottom: 24px;
}

/* 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;
}

/* Session list optimizations */
.session-grid {
  /* Use CSS Grid for better performance */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  /* Optimize for large lists */
  contain: layout style paint;
}

.session-item {
  /* Default state - visible and positioned */
  opacity: 1;
  transform: translateY(0) translateZ(0);

  /* Optimize individual session cards */
  contain: layout style;
  /* Use hardware acceleration */
  backface-visibility: hidden;
  /* Ensure smooth interactions */
  will-change: auto;
}

.session-item:hover {
  /* Only use will-change during hover */
  will-change: transform, box-shadow;
}

.session-item:not(:hover) {
  will-change: auto;
}

/* 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;
}