@import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap);
/* Theme Variables and Color System */

:root {
  /* Light theme aligned with Lovable palette */
  --background: 235 60% 98%;      /* soft lavender tint */
  --foreground: 235 24% 16%;      /* slate text */
  --card: 0 0% 100%;              /* crisp white surfaces */
  --card-foreground: 235 24% 16%;
  --popover: 0 0% 100%;
  --popover-foreground: 235 24% 16%;
  --primary: 263 64% 55%;         /* shared violet primary */
  --primary-foreground: 0 0% 100%;
  --primary-vivid: 263 70% 62%;   /* brighter violet for interactive elements */
  --success: 142 71% 45%;
  --success-foreground: 0 0% 100%;
  --secondary: 235 42% 95%;       /* subtle indigo wash */
  --secondary-foreground: 235 30% 25%;
  --muted: 236 30% 92%;           /* muted lavender gray */
  --muted-foreground: 235 15% 40%;
  --accent: 264 45% 90%;          /* gentle lilac accent */
  --accent-foreground: 263 50% 30%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --warning: 38 92% 50%;
  --warning-foreground: 30 80% 15%;
  --border: 235 28% 88%;          /* cool border tone */
  --input: 235 30% 96%;           /* subtle indigo input fill */
  --ring: 263 64% 55%;
  --radius: 0.5rem;

  /* Tap highlight and selection */
  --tap-highlight: hsl(var(--ring) / 0.20);
  --selection-bg: hsl(var(--ring) / 0.28);
  --selection-fg: hsl(var(--foreground));
}

.dark {
  /* Deep indigo dark theme - 10% lighter */
  --background: 232 25% 13%;     /* rich navy background */
  --foreground: 248 18% 98%;     /* near-white text for better contrast */
  --card: 234 23% 18%;           /* elevated surface for cards */
  --card-foreground: 248 18% 96%;
  --popover: 235 22% 20%;        /* slightly brighter popovers */
  --popover-foreground: 248 18% 96%;
  --primary: 263 70% 61%;        /* violet accent tuned for AA contrast */
  --primary-foreground: 260 55% 96%;
  --primary-vivid: 263 75% 68%;  /* brighter violet for interactive elements */
  --success: 142 71% 45%;        /* consistent green for active states */
  --success-foreground: 0 0% 100%; /* white text on success */
  --secondary: 232 18% 23%;      /* layered surface blocks */
  --secondary-foreground: 248 16% 92%;
  --muted: 230 18% 26%;          /* muted chips/input backgrounds */
  --muted-foreground: 232 12% 72%;  /* muted descriptive text */
  --accent: 262 32% 31%;         /* subtle indigo accent */
  --accent-foreground: 260 35% 94%;
  --destructive: 354 65% 53%;    /* clear red */
  --destructive-foreground: 0 0% 98%;
  --warning: 38 90% 55%;         /* slightly brighter amber for dark mode */
  --warning-foreground: 30 80% 12%;
  --border: 233 18% 29%;         /* cool indigo borders */
  --input: 232 18% 22%;          /* recessed inputs */
  --ring: 263 64% 55%;

  /* Slightly stronger in dark mode */
  --tap-highlight: hsl(var(--ring) / 0.35);
  /* Dark mode selection needs higher opacity */
  --selection-bg: hsl(var(--ring) / 0.50);
  --selection-fg: hsl(var(--foreground));
}

/* Text selection styling */
::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

/* Base body styling */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Light theme background */
.light {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.theme-transitioning .light {
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.light {
  background: linear-gradient(180deg,
    hsl(236, 65%, 99%) 0%,     /* airy lavender */
    hsl(235, 60%, 97%) 45%,    /* subtle wash */
    hsl(235, 50%, 95%) 100%);  /* grounded base */
  min-height: 100vh;
}

/* Dark theme background - 10% lighter */
.dark {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  background: linear-gradient(165deg,
    hsl(233, 32%, 11%) 0%,      /* deep indigo */
    hsl(233, 28%, 14%) 45%,     /* subtle transition */
    hsl(235, 24%, 17%) 100%);   /* lifted base */
  min-height: 100vh;
  position: relative;
}

/* Premium subtle grain texture overlay for dark mode */
.dark::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.015;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%2760%27 height=%2760%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27noise%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23noise%29%27 opacity=%271%27/%3E%3C/svg%3E");
}

/* Ensure all content is above the texture overlay */
body > * {
  position: relative;
  z-index: 2;
}

/* Prevent horizontal overflow on mobile */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Theme utilities */

/* Smooth theme transitions - only during theme switch */
.theme-transitioning body,
.theme-transitioning .bg-background,
.theme-transitioning .bg-card,
.theme-transitioning .text-foreground,
.theme-transitioning .border,
.theme-transitioning button,
.theme-transitioning input,
.theme-transitioning textarea {
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              color 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Add to your CSS - smooth transitions for theme changes */
.transition-colors {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* Scrollbar Styling */

:root {
  --scrollbar-thumb: hsl(220 13% 85%);
  --scrollbar-track: transparent;
}

.light {
  --scrollbar-thumb: hsl(220 10% 85%);  /* neutral scrollbar */
  --scrollbar-track: transparent;
}

.dark {
  --scrollbar-thumb: hsl(220 10% 40%);
  --scrollbar-track: transparent;
}

/* Custom scrollbar styling */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 0px;
}

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

/* Scrollbar utility classes */

/* Smart scrollbar behavior for message containers */
.smart-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
  overflow-y: auto;
  /* Prevent artificial overflow */
  box-sizing: border-box;
  min-height: 0;
}

.smart-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.smart-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.smart-scroll::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 0px;
  opacity: 0.7;
}

.smart-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb);
  opacity: 1;
}

/* Use overlay scrolling where supported to avoid layout shift */
@supports (overflow-y: overlay) {
  .smart-scroll {
    overflow-y: overlay;
  }
}

/* Light scrollbar variant */
.scrollbar-light::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scrollbar-light::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-light::-webkit-scrollbar-thumb {
  background-color: rgba(229, 231, 235, 0.5); /* light gray with transparency */
  border-radius: 0px;
}

.scrollbar-light::-webkit-scrollbar-thumb:hover {
  background-color: rgba(209, 213, 219, 0.8); /* slightly darker on hover */
}

/* Enhanced scrollbar styling */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 0px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(155, 155, 155, 0.8);
}

/* Hide scrollbar while keeping scroll functionality */
.hide-scrollbar {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
  -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

/* Show scrollbar on hover */
.scrollbar-on-hover {
  scrollbar-width: none;  /* Firefox - hide by default */
  overflow-y: auto;
}

.scrollbar-on-hover::-webkit-scrollbar {
  width: 4px;
}

.scrollbar-on-hover::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 2px;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.scrollbar-on-hover:hover {
  scrollbar-width: thin;  /* Firefox - show on hover */
}

.scrollbar-on-hover:hover::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
}

/* Mobile-specific scroll fixes */
@media (max-width: 640px) {
  .hide-scrollbar {
    /* Smooth momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    /* Contain overscroll to prevent pull-to-refresh conflicts */
    overscroll-behavior-y: contain;
    /* Use instant scroll-behavior for programmatic scrolls */
    scroll-behavior: auto;
  }

  /* Optimized mobile scrolling for message containers */
  .scroll-container-optimized {
    /* Smooth momentum scrolling */
    -webkit-overflow-scrolling: touch;
    /* Contain overscroll within the container */
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
    /* Vertical scroll only */
    touch-action: pan-y;
    /* Disable scroll anchoring which can cause jumps */
    overflow-anchor: none;
    /* Optimize rendering performance */
    will-change: scroll-position;
  }
}
/* Interaction States and Animations */

/* Interaction timing variables */
:root {
  --interaction-duration: 200ms;
  --interaction-duration-fast: 100ms;
  --interaction-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --interaction-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Focus ring tokens */
  --focus-ring-width: 2px;
  --focus-ring-color: hsl(var(--ring));
  --focus-ring-offset: 2px;
}

/* Touch optimization - prevent delays and zoom */
a, button, input, textarea, select, summary, [role="button"] {
  -webkit-tap-highlight-color: var(--tap-highlight);
  touch-action: manipulation;
}

/* GPU-accelerated transitions */
button, input, textarea, select, a, [role="button"] {
  transition:
    background-color var(--interaction-duration) var(--interaction-easing),
    border-color var(--interaction-duration) var(--interaction-easing),
    box-shadow var(--interaction-duration) var(--interaction-easing),
    transform var(--interaction-duration-fast) var(--interaction-easing);
  will-change: transform;
}

/* Focus management */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Touch device interactions */
@media (hover: none) and (pointer: coarse) {
  button:active, [role="button"]:active {
    transform: scale(0.98);
  }

  .tap-feedback:active {
    background-color: hsl(var(--accent) / 0.18);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  :root {
    --interaction-duration: 0.01ms;
    --interaction-duration-fast: 0.01ms;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --tap-highlight: hsl(var(--ring) / 0.5);
    --selection-bg: hsl(var(--ring) / 0.6);
  }

  button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
  }
}

/* Utility classes for interactions */

/* Performance optimization */
.interaction-layer {
  isolation: isolate;
  transform: translateZ(0);
  contain: layout style paint;
}

/* Loading states */
[aria-busy="true"] {
  cursor: wait;
  position: relative;
}

[aria-busy="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: hsl(var(--background) / 0.7);
  display: grid;
  place-items: center;
  border-radius: inherit;
}

/* Interaction state machine */
[data-interaction-state="idle"] {
  transform: scale(1);
  box-shadow: none;
}

[data-interaction-state="hover"] {
  background: hsl(var(--accent) / 0.05);
}

[data-interaction-state="focus"] {
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.5);
}

[data-interaction-state="active"] {
  transform: scale(0.98);
  box-shadow: inset 0 1px 3px hsl(var(--foreground) / 0.2);
}

[data-interaction-state="disabled"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

[data-interaction-state="loading"] {
  cursor: wait;
  position: relative;
  color: transparent;
}

/* Simple loading spinner */
[data-interaction-state="loading"]::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid hsl(var(--accent));
  border-radius: 50%;
  border-top-color: transparent;
  animation: spinner 600ms linear infinite;
}

@keyframes spinner {
  to { transform: rotate(360deg); }
}

/* Ripple effect */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: hsl(var(--accent) / 0.3);
  transition: width 0.6s, height 0.6s;
}

.ripple:active::before {
  width: 300px;
  height: 300px;
}

/* Forgiving interactions */
.icon-button-forgiving {
  position: relative;
  padding: 8px;
}

.icon-button-forgiving::before {
  content: '';
  position: absolute;
  inset: -8px;
  z-index: 1;
}

/* Prevent accidental actions */
form[data-submitting] button[type="submit"] {
  pointer-events: none;
  opacity: 0.6;
}

/* Selection control */
.no-select {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.no-select .selectable {
  -webkit-user-select: text;
  user-select: text;
}

/* Modal backdrop protection */
.modal-backdrop {
  padding: 20px;
}

.modal-content {
  position: relative;
  z-index: 1;
}

/* Platform-specific optimizations */
@supports (-webkit-touch-callout: none) {
  /* iOS specific */
  input, textarea {
    -webkit-user-select: text;
    -webkit-touch-callout: none;
  }

  button {
    -webkit-appearance: none;
  }

  .scroll-container {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* Android adjustments */
@media (hover: none) and (pointer: coarse) and (-webkit-min-device-pixel-ratio: 2), (hover: none) and (pointer: coarse) and (min-resolution: 2dppx) {
  :root {
    --tap-highlight: hsl(var(--ring) / 0.3);
  }
}

/* Desktop with touch support */
@media (hover: hover) and (pointer: coarse) {
  button, [role="button"] {
    transition-duration: 150ms;
    min-height: 36px;
    min-width: 36px;
  }
}
/* Keyboard Navigation Patterns */

/* Screen reader only content */
.sr-only, .sr-announce {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Skip links for keyboard navigation */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 8px;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/* Roving tabindex patterns */
[role="toolbar"] [role="button"][tabindex="-1"],
[role="menu"] [role="menuitem"][tabindex="-1"],
[role="tablist"] [role="tab"][tabindex="-1"] {
  outline: none;
}

[role="toolbar"] [role="button"][tabindex="0"]:focus-visible,
[role="menu"] [role="menuitem"][tabindex="0"]:focus-visible,
[role="tablist"] [role="tab"][tabindex="0"]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Radio group pattern */
[role="radiogroup"] {
  display: flex;
  gap: 8px;
}

[role="radiogroup"]:focus-within {
  box-shadow: 0 0 0 1px hsl(var(--ring) / 0.2);
  border-radius: var(--radius);
}

/* Grid navigation */
[role="grid"] [role="gridcell"][tabindex="-1"] {
  outline: none;
}

[role="grid"] [role="gridcell"][tabindex="0"]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: -1px;
}

/* List navigation */
[role="listbox"] [role="option"][aria-selected="false"] {
  outline: none;
}

[role="listbox"] [role="option"][aria-selected="true"] {
  background: hsl(var(--accent) / 0.1);
}

[role="listbox"] [role="option"]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: -2px;
}

/* Keyboard hints */
[data-keyboard-hint]::after {
  content: attr(data-keyboard-hint);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  padding: 4px 8px;
  border-radius: var(--radius);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms;
  margin-bottom: 4px;
}

[data-keyboard-hint]:focus-visible::after {
  opacity: 1;
}

/* Focus trap */
[data-focus-trap="active"] {
  isolation: isolate;
}

[data-focus-trap="active"] [data-focus-trap-start],
[data-focus-trap="active"] [data-focus-trap-end] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Focus within compound components */
.input-group:focus-within {
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.35);
  border-radius: var(--radius);
}

/* Stable focus (prevents layout shift) */
.stable-focus {
  --focus-ring-offset: 3px;
  margin: var(--focus-ring-offset);
}

.stable-focus:focus-visible {
  outline-offset: calc(var(--focus-ring-offset) * -1);
}

/* Tooltip delay behavior */
[data-tooltip] {
  --tooltip-delay: 750ms;
  position: relative;
}

[data-tooltip]:hover ~ [data-tooltip]:hover {
  --tooltip-delay: 0ms;
}
/* Metallic Effects and Premium Styling */
  /* Metallic effect classes */
  .metallic-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
      hsl(var(--card)) 0%,
      hsl(var(--card) / 0.95) 50%,
      hsl(var(--card) / 0.9) 100%);
    border: 1px solid hsl(var(--border) / 0.6);
    box-shadow:
      0 4px 6px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .light .metallic-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50%;
    background: linear-gradient(to bottom,
      rgba(255, 252, 248, 0.5) 0%,   /* warm white highlight */
      rgba(255, 250, 245, 0.2) 50%,
      transparent 100%);
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    pointer-events: none;
  }

  .dark .metallic-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50%;
    background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.05) 50%,
      transparent 100%);
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    pointer-events: none;
  }

  /* Metallic surfaces */
  .light .metallic-surface {
    background: linear-gradient(135deg,
      hsl(30, 20%, 98%) 0%,      /* warm white */
      hsl(30, 15%, 96%) 50%,     /* soft beige */
      hsl(30, 12%, 94%) 100%);   /* warm gray */
    border: 1px solid hsl(30, 10%, 90%);
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 252, 248, 0.6);
  }

  .dark .metallic-surface {
    background: linear-gradient(135deg,
      #4a5568 0%,
      #2d3748 50%,
      #1a202c 100%);
    border: 1px solid rgba(100, 200, 255, 0.15);
    box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(100, 200, 255, 0.1),
      0 0 20px rgba(100, 200, 255, 0.05);
  }

  /* Hover metallic effect */
  .light .hover-metallic:hover {
    background: linear-gradient(135deg,
      hsl(30, 25%, 99%) 0%,      /* brighter warm white */
      hsl(30, 18%, 97%) 50%,     /* soft warm hover */
      hsl(30, 15%, 95%) 100%);   /* warm depth */
    border-color: hsl(30, 12%, 88%);
    box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 252, 248, 0.8);
  }

  .dark .hover-metallic:hover {
    background: linear-gradient(135deg,
      #5a6578 0%,
      #4a5568 50%,
      #2d3748 100%);
    border-color: rgba(100, 200, 255, 0.3);
    box-shadow:
      0 6px 12px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(100, 200, 255, 0.2),
      0 0 25px rgba(100, 200, 255, 0.1);
    transform: translateY(-1px);
  }

  /* Metallic gradients */
  .light .bg-metallic-gradient {
    background: linear-gradient(135deg,
      hsl(30, 25%, 99%) 0%,      /* warm white */
      hsl(30, 20%, 98%) 25%,     /* cream */
      hsl(30, 15%, 96%) 50%,     /* soft beige */
      hsl(30, 12%, 94%) 75%,     /* warm gray */
      hsl(30, 10%, 92%) 100%);   /* deeper warm */
  }

  .dark .bg-metallic-gradient {
    background: linear-gradient(135deg,
      #4a5568 0%,
      #2d3748 25%,
      #1a202c 50%,
      #171923 75%,
      #0f1419 100%);
  }

  /* Metallic button styling */
  .metallic-button {
    position: relative;
    background: linear-gradient(135deg,
      hsl(var(--primary)) 0%,
      hsl(var(--primary) / 0.9) 50%,
      hsl(var(--primary) / 0.8) 100%);
    border: 1px solid hsl(var(--primary) / 0.3);
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
  }

  .metallic-button:hover {
    background: linear-gradient(135deg,
      hsl(var(--primary) / 1.1) 0%,
      hsl(var(--primary)) 50%,
      hsl(var(--primary) / 0.9) 100%);
    box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
  }

  .metallic-button:active {
    transform: translateY(0);
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  /* Metallic input styling */
  .metallic-input {
    background: linear-gradient(135deg,
      hsl(var(--input)) 0%,
      hsl(var(--input) / 0.95) 50%,
      hsl(var(--input) / 0.9) 100%);
    border: 1px solid hsl(var(--border) / 0.6);
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .metallic-input:focus {
    background: linear-gradient(135deg,
      hsl(var(--input) / 1.05) 0%,
      hsl(var(--input)) 50%,
      hsl(var(--input) / 0.95) 100%);
    border-color: hsl(var(--ring));
    box-shadow:
      0 0 0 2px hsl(var(--ring) / 0.2),
      0 1px 2px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }

/* Premium styles for light mode */
  .light .bg-gradient-subtle {
    background: linear-gradient(to bottom,
      hsl(30, 20%, 99%),    /* warm white */
      hsl(30, 15%, 97%));   /* soft cream */
  }

  .light .card-premium {
    background: linear-gradient(135deg,
      hsl(0, 0%, 100%) 0%,
      hsl(30, 15%, 99%) 50%,
      hsl(30, 12%, 98%) 100%);
    border: 1px solid hsl(30, 8%, 92%);
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.04),
      0 4px 8px rgba(0, 0, 0, 0.02);
  }

  .light .button-premium {
    background: linear-gradient(135deg,
      hsl(200, 90%, 44%) 0%,
      hsl(200, 90%, 42%) 50%,
      hsl(200, 90%, 40%) 100%);
    border: 1px solid hsl(200, 90%, 38%);
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  .light .button-premium:hover {
    background: linear-gradient(135deg,
      hsl(200, 90%, 46%) 0%,
      hsl(200, 90%, 44%) 50%,
      hsl(200, 90%, 42%) 100%);
    box-shadow:
      0 3px 6px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .light .input-premium {
    background: hsl(30, 15%, 98%);
    border: 1px solid hsl(30, 8%, 90%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  .light .input-premium:focus {
    background: hsl(0, 0%, 100%);
    border-color: hsl(200, 90%, 60%);
    box-shadow:
      0 0 0 3px hsl(200, 90%, 95%),
      inset 0 1px 2px rgba(0, 0, 0, 0.02);
  }

  .light .sidebar-premium {
    background: linear-gradient(180deg,
      hsl(30, 18%, 98%) 0%,
      hsl(30, 15%, 97%) 50%,
      hsl(30, 12%, 96%) 100%);
    border-right: 1px solid hsl(30, 8%, 92%);
  }

/* Premium styles for dark mode */
  .dark .bg-premium-dark {
    background: linear-gradient(135deg,
      hsl(220, 20%, 15%) 0%,
      hsl(220, 18%, 12%) 50%,
      hsl(220, 25%, 8%) 100%);
    position: relative;
  }

  .dark .bg-premium-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%,
      rgba(100, 200, 255, 0.03) 0%,
      transparent 50%);
    pointer-events: none;
  }

  .dark .card-premium {
    background: linear-gradient(135deg,
      hsl(220, 22%, 18%) 0%,
      hsl(220, 20%, 15%) 50%,
      hsl(220, 18%, 12%) 100%);
    border: 1px solid rgba(100, 200, 255, 0.12);
    box-shadow:
      0 8px 16px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(100, 200, 255, 0.08),
      0 0 0 1px rgba(255, 255, 255, 0.02);
    position: relative;
  }

  .dark .card-premium::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(100, 200, 255, 0.3) 50%,
      transparent 100%);
  }

  .dark .text-glow {
    text-shadow: 0 0 10px rgba(100, 200, 255, 0.3);
  }

  .dark .border-glow {
    border-color: rgba(100, 200, 255, 0.2);
    box-shadow: 0 0 10px rgba(100, 200, 255, 0.1);
  }

  .dark .button-premium {
    background: linear-gradient(135deg,
      hsl(200, 100%, 45%) 0%,
      hsl(200, 100%, 55%) 50%,
      hsl(200, 100%, 40%) 100%);
    border: 1px solid rgba(100, 200, 255, 0.3);
    box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 0 20px rgba(100, 200, 255, 0.2);
    position: relative;
    overflow: hidden;
  }

  .dark .button-premium::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
      transparent 40%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
  }

  .dark .button-premium:hover::before {
    transform: translateX(100%);
  }

  .dark .button-premium:hover {
    background: linear-gradient(135deg,
      hsl(200, 100%, 50%) 0%,
      hsl(200, 100%, 60%) 50%,
      hsl(200, 100%, 45%) 100%);
    box-shadow:
      0 6px 12px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 0 30px rgba(100, 200, 255, 0.3);
    transform: translateY(-1px);
  }

  .dark .input-premium {
    background: linear-gradient(135deg,
      hsl(220, 20%, 18%) 0%,
      hsl(220, 18%, 15%) 50%,
      hsl(220, 22%, 12%) 100%);
    border: 1px solid rgba(100, 200, 255, 0.15);
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(255, 255, 255, 0.02);
  }

  .dark .input-premium:focus {
    border-color: rgba(100, 200, 255, 0.4);
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.3),
      0 0 0 2px rgba(100, 200, 255, 0.2),
      0 0 20px rgba(100, 200, 255, 0.1);
  }

  .dark .sidebar-premium {
    background: linear-gradient(180deg,
      hsl(220, 25%, 16%) 0%,
      hsl(220, 22%, 14%) 50%,
      hsl(220, 20%, 12%) 100%);
    border-right: 1px solid rgba(100, 200, 255, 0.1);
    box-shadow:
      4px 0 8px rgba(0, 0, 0, 0.2),
      inset -1px 0 0 rgba(100, 200, 255, 0.05);
  }

  .dark .nav-item-premium {
    background: linear-gradient(135deg,
      transparent 0%,
      rgba(100, 200, 255, 0.03) 50%,
      transparent 100%);
    border: 1px solid transparent;
    transition: all 0.3s ease;
  }

  .dark .nav-item-premium:hover {
    background: linear-gradient(135deg,
      rgba(100, 200, 255, 0.08) 0%,
      rgba(100, 200, 255, 0.05) 50%,
      rgba(100, 200, 255, 0.02) 100%);
    border-color: rgba(100, 200, 255, 0.15);
    box-shadow:
      inset 0 1px 0 rgba(100, 200, 255, 0.1),
      0 2px 4px rgba(0, 0, 0, 0.2);
  }
/* Performance-based Animation Controls */
  /* Applied to root html element by usePerformanceDetection hook */

  /* Normal performance - all animations enabled */
  .performance-normal {
    /* All animations run normally */
  }

  /* Reduced performance - simpler, faster animations */
  .performance-reduced :not(.critical-animation) {
    animation-duration: 0.2s !important;
    transition-duration: 0.15s !important;
  }

  .performance-reduced .animate-pulse:not(.critical-animation),
  .performance-reduced .pulse-optimized:not(.critical-animation) {
    animation: none !important;
    opacity: 1 !important;
  }

  /* Minimal performance - no animations except critical ones */
  .performance-minimal :not(.critical-animation) {
    animation: none !important;
    transition: none !important;
  }

  /* Preserve critical animations in all performance modes */
  .performance-minimal .animate-spin.critical-animation,
  .performance-minimal .animate-spin,
  .performance-reduced .animate-spin.critical-animation,
  .performance-reduced .animate-spin {
    animation: spin 1s linear infinite !important;
  }

  /* Preserve essential UI animations */
  .performance-minimal .tooltip,
  .performance-minimal .dropdown-menu,
  .performance-minimal .modal,
  .performance-minimal .popover {
    animation: inherit !important;
    transition: inherit !important;
  }

  /* Remove will-change and GPU hints in minimal mode for non-critical elements */
  .performance-minimal .gpu-optimized:not(.critical-animation),
  .performance-minimal .transition-gpu:not(.critical-animation) {
    will-change: auto !important;
    transform: none !important;
  }

  /* Instant visibility for animated entrance elements */
  .performance-minimal [class*="animate-"]:not(.critical-animation),
  .performance-reduced [class*="animate-"]:not(.critical-animation) {
    opacity: 1 !important;
  }

  /* Respect user motion preferences globally */
  @media (prefers-reduced-motion: reduce) {
    *:not(.critical-animation),
    *:not(.critical-animation)::before,
    *:not(.critical-animation)::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }

    /* Keep functional animations like spinners */
    .animate-spin,
    .critical-animation {
      animation: spin 1s linear infinite !important;
    }
  }

  /* Spinner animation definition with hardware acceleration */
  @keyframes spin {
    from {
      transform: rotate(0deg) translateZ(0);
    }
    to {
      transform: rotate(360deg) translateZ(0);
    }
  }

  /* Hardware acceleration for all spinners to prevent flickering on Windows */
  .animate-spin {
    will-change: transform;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    transform-style: preserve-3d;
  }
@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_AMS-Regular.73ea273a72f4aca30ca5.woff2) format("woff2"),url(/static/media/KaTeX_AMS-Regular.d562e886c52f12660a41.woff) format("woff"),url(/static/media/KaTeX_AMS-Regular.853be92419a6c3766b9a.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/static/media/KaTeX_Caligraphic-Bold.a1abf90dfd72792a577a.woff2) format("woff2"),url(/static/media/KaTeX_Caligraphic-Bold.d757c535a2e5902f1325.woff) format("woff"),url(/static/media/KaTeX_Caligraphic-Bold.7489a2fbfb9bfe704420.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Caligraphic-Regular.d6484fce1ef428d5bd94.woff2) format("woff2"),url(/static/media/KaTeX_Caligraphic-Regular.db074fa22cf224af93d7.woff) format("woff"),url(/static/media/KaTeX_Caligraphic-Regular.7e873d3833eb108a0758.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/static/media/KaTeX_Fraktur-Bold.931d67ea207ab37ee693.woff2) format("woff2"),url(/static/media/KaTeX_Fraktur-Bold.354501bac435c3264834.woff) format("woff"),url(/static/media/KaTeX_Fraktur-Bold.4c761b3711973ab04edf.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Fraktur-Regular.172d3529b26f8cedef6b.woff2) format("woff2"),url(/static/media/KaTeX_Fraktur-Regular.6fdf0ac577be0ba82a4c.woff) format("woff"),url(/static/media/KaTeX_Fraktur-Regular.ed305b5434865e06ffde.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/static/media/KaTeX_Main-Bold.39890742bc957b368704.woff2) format("woff2"),url(/static/media/KaTeX_Main-Bold.0c3b8929d377c0e9b2f3.woff) format("woff"),url(/static/media/KaTeX_Main-Bold.8169508bf58f8bd92ad8.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/static/media/KaTeX_Main-BoldItalic.20f389c4120be058d80a.woff2) format("woff2"),url(/static/media/KaTeX_Main-BoldItalic.428978dc7837d46de091.woff) format("woff"),url(/static/media/KaTeX_Main-BoldItalic.828abcb200061cffbaae.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/static/media/KaTeX_Main-Italic.fe2176f79edaa716e621.woff2) format("woff2"),url(/static/media/KaTeX_Main-Italic.fd947498bc16392e76c2.woff) format("woff"),url(/static/media/KaTeX_Main-Italic.fa675e5e4bec9eb250b6.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Main-Regular.f650f111a3b890d116f1.woff2) format("woff2"),url(/static/media/KaTeX_Main-Regular.4f35fbcc9ee8614c2bcc.woff) format("woff"),url(/static/media/KaTeX_Main-Regular.9eba1d77abcf2aa6e94e.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/static/media/KaTeX_Math-BoldItalic.dcbcbd93bac0470b462d.woff2) format("woff2"),url(/static/media/KaTeX_Math-BoldItalic.3f07ed67f06c720120ce.woff) format("woff"),url(/static/media/KaTeX_Math-BoldItalic.bf2d440b3a42ea78a998.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/static/media/KaTeX_Math-Italic.6d3d25f4820d0da8f01f.woff2) format("woff2"),url(/static/media/KaTeX_Math-Italic.96759856b4e70f3a8338.woff) format("woff"),url(/static/media/KaTeX_Math-Italic.8a5f936332e8028c7278.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/static/media/KaTeX_SansSerif-Bold.95591a929f0d32aa282a.woff2) format("woff2"),url(/static/media/KaTeX_SansSerif-Bold.b9cd458ac6d5889ff9c3.woff) format("woff"),url(/static/media/KaTeX_SansSerif-Bold.5b49f4993ae22d7975b4.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/static/media/KaTeX_SansSerif-Italic.7d393d382f3e7fb1c637.woff2) format("woff2"),url(/static/media/KaTeX_SansSerif-Italic.8d593cfaa96238d5e2f8.woff) format("woff"),url(/static/media/KaTeX_SansSerif-Italic.b257a18c016f37ee4543.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/static/media/KaTeX_SansSerif-Regular.cd5e231e0cc53b2cb2c0.woff2) format("woff2"),url(/static/media/KaTeX_SansSerif-Regular.02271ec5cb9f5b4588ac.woff) format("woff"),url(/static/media/KaTeX_SansSerif-Regular.2f7bc363fc5424ebda59.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Script-Regular.c81d1b2a4b75d3eded60.woff2) format("woff2"),url(/static/media/KaTeX_Script-Regular.073b3402d036714b4370.woff) format("woff"),url(/static/media/KaTeX_Script-Regular.fc9ba5249878cd8f8d88.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Size1-Regular.6eec866c69313624be60.woff2) format("woff2"),url(/static/media/KaTeX_Size1-Regular.0108e89c9003e8c14ea3.woff) format("woff"),url(/static/media/KaTeX_Size1-Regular.6de7d4b539221a49e9e2.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Size2-Regular.2960900c4f271311eb36.woff2) format("woff2"),url(/static/media/KaTeX_Size2-Regular.3a99e70aee4076660d38.woff) format("woff"),url(/static/media/KaTeX_Size2-Regular.57f5c1837853986ea1db.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Size3-Regular.e1951519f6f0596f7356.woff2) format("woff2"),url(/static/media/KaTeX_Size3-Regular.7947224e8a9914fa332b.woff) format("woff"),url(/static/media/KaTeX_Size3-Regular.8d6b6822586eea3d3b20.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Size4-Regular.e418bf257af1052628d8.woff2) format("woff2"),url(/static/media/KaTeX_Size4-Regular.aeffd8025cba3647f1a6.woff) format("woff"),url(/static/media/KaTeX_Size4-Regular.4ad7c7e8bb8d10a34bb7.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Typewriter-Regular.c295e7f71970f03c0549.woff2) format("woff2"),url(/static/media/KaTeX_Typewriter-Regular.4c6b94fd1d07f8beff7c.woff) format("woff"),url(/static/media/KaTeX_Typewriter-Regular.c5c02d763c89380dcb4e.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.25"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}

/*
 * Professional Syntax Highlighting Theme
 * Designed for accessibility (WCAG AA), reduced eye strain, and optimal readability
 * Inspired by: GitHub Primer, Night Owl, Nord, and One Dark Pro
 * Color psychology: Red=control, Purple=functions, Blue=primitives, Green=strings
 */

/* Import JetBrains Mono for code blocks */

/* Font rendering optimizations for markdown content */
.markdown-content {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Enable text selection for all markdown content */
.markdown-content,
.markdown-content * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

/* Typography refinements for better readability */
.prose a {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  word-break: break-all;
  overflow-wrap: break-word;
}

.prose p {
  letter-spacing: -0.011em;
  line-height: 1.5;
}

.prose h1,
.prose h2,
.prose h3 {
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* Fix for long continuous text */
.prose {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Light Mode - Optimized for white backgrounds with WCAG AA contrast */
.hljs{
  display: block;
  overflow-x: auto;
  background-color: transparent;
  color: #1f2937 !important; /* gray-800 - ensures readability over prose defaults */
}

/* Override prose plugin's code styling to ensure proper contrast */
.prose pre code.hljs,
.prose code.hljs,
pre code.hljs,
code.hljs {
  color: #1f2937 !important; /* gray-800 base text color */
}

/* Keywords & Control Flow (import, def, class, return, if, for) - Rose/Red for attention */
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_{
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}

/* Functions & Classes (user-defined) - Violet for distinction */
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_{
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}

/* Primitives (numbers, booleans, None) & Attributes - Blue for data types */
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-variable{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

/* Strings & Text Data - Emerald green (universal convention) */
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string{
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

/* Built-in Functions (print, len, range) - Amber for special status */
.hljs-built_in,
.hljs-symbol{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

/* Comments - Gray, readable but subtle (WCAG AA: 4.6:1 on white) */
.hljs-code,
.hljs-comment,
.hljs-formula{
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

/* HTML/CSS Elements - Teal for markup */
.hljs-name,
.hljs-quote,
.hljs-selector-pseudo,
.hljs-selector-tag{
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}

/* Default text color */
.hljs-subst{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

/* Section headers */
.hljs-section{
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

/* List bullets */
.hljs-bullet{
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}

/* Emphasis */
.hljs-emphasis{
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

/* Strong/Bold */
.hljs-strong{
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

/* Diff additions */
.hljs-addition{
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

/* Diff deletions */
.hljs-deletion{
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}

/*
 * Dark Mode - Optimized for reduced eye strain in low-light conditions
 * Based on Night Owl principles: muted yet vibrant, excellent contrast
 * Uses slightly desaturated colors to prevent visual fatigue
 */
.dark .hljs{
  background-color: transparent;
  color: #f3f4f6 !important; /* gray-100 - ensures readability */
}

/* Override prose plugin's code styling in dark mode */
.dark .prose pre code.hljs,
.dark .prose code.hljs,
.dark pre code.hljs,
.dark code.hljs {
  color: #f3f4f6 !important; /* gray-100 base text color */
}

/* Keywords & Control Flow - Warm rose/coral for reduced eye strain */
.dark .hljs-doctag,
.dark .hljs-keyword,
.dark .hljs-meta .hljs-keyword,
.dark .hljs-template-tag,
.dark .hljs-template-variable,
.dark .hljs-type,
.dark .hljs-variable.language_{
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}

/* Functions & Classes - Softer purple/lavender */
.dark .hljs-title,
.dark .hljs-title.class_,
.dark .hljs-title.class_.inherited__,
.dark .hljs-title.function_{
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}

/* Primitives & Attributes - Sky blue for clarity */
.dark .hljs-attr,
.dark .hljs-attribute,
.dark .hljs-literal,
.dark .hljs-meta,
.dark .hljs-number,
.dark .hljs-operator,
.dark .hljs-selector-attr,
.dark .hljs-selector-class,
.dark .hljs-selector-id,
.dark .hljs-variable{
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}

/* Strings - Softer emerald green, easier on eyes */
.dark .hljs-meta .hljs-string,
.dark .hljs-regexp,
.dark .hljs-string{
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

/* Built-in Functions - Warm amber */
.dark .hljs-built_in,
.dark .hljs-symbol{
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

/* Comments - Balanced gray for readability without distraction */
.dark .hljs-code,
.dark .hljs-comment,
.dark .hljs-formula{
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

/* HTML/CSS Elements - Teal for consistency */
.dark .hljs-name,
.dark .hljs-quote,
.dark .hljs-selector-pseudo,
.dark .hljs-selector-tag{
  --tw-text-opacity: 1;
  color: rgb(45 212 191 / var(--tw-text-opacity, 1));
}

/* Default text */
.dark .hljs-subst{
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

/* Section headers */
.dark .hljs-section{
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}

/* List bullets */
.dark .hljs-bullet{
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

/* Emphasis */
.dark .hljs-emphasis{
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

/* Strong/Bold */
.dark .hljs-strong{
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

/* Diff additions */
.dark .hljs-addition{
  background-color: rgb(6 78 59 / 0.2);
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

/* Diff deletions */
.dark .hljs-deletion{
  background-color: rgb(136 19 55 / 0.2);
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}

/* User selection styles - Enhanced for streaming text */
.user-select-text {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  cursor: text;
  pointer-events: auto !important;
}

.user-select-text * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  pointer-events: auto !important;
}

.user-select-text pre, .user-select-text code {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

/* Ensure prose content is always selectable */
.prose {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

.prose * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

/* Ensure streaming content is selectable */
.message-content {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  pointer-events: auto !important;
}

/* Agent tab dots - enhanced touch targets for mobile */
.agent-tab-dots {
  /* Minimum touch target size (44x44px recommended by WCAG) */
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: var(--tap-highlight);
  touch-action: manipulation;
}

/* Ensure touch targets on mobile */
@media (hover: none) and (pointer: coarse) {
  .agent-tab-dots {
    min-width: 32px;
    min-height: 32px;
    opacity: 0.6 !important; /* Always visible on touch devices */
  }

  /* Make the entire tab area more touch-friendly */
  button[role="tab"] {
    min-height: 36px;
    padding: 8px 12px;
  }
}

/* Optimized animations with will-change */
.animate-optimized {
  will-change: transform, opacity;
}

/* Reduce box-shadow complexity */
.shadow-optimized {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Targeted overflow handling for specific elements */
.prose pre {
  overflow-x: auto;
  max-width: 100%;
  word-break: break-word;
}

.prose table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

.prose code {
  white-space: pre;
  overflow-x: auto;
  word-break: break-word;
}

/* Prevent horizontal overflow on mobile */
@media (max-width: 640px) {
  .prose {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .prose img {
    max-width: 100%;
    height: auto;
  }
  
  .prose pre {
    font-size: 0.875rem;
  }
}

/* Add slight visual indication of scrollable content */
.prose pre::-webkit-scrollbar {
  height: 6px;
}

/* Optimized classes to replace inline styles */
.full-width-flex { 
  width: 0; 
}

.scroll-container-optimized {
  /* Desktop scroll optimization */
  overscroll-behavior: contain;
  contain: layout style paint;
  will-change: transform;
}

/* Mobile scroll settings are defined in scrollbar.css */
@media (max-width: 640px) {
  .scroll-container-optimized {
    /* Fix for iOS Safari z-index issues */
    position: relative;
    z-index: 1;
  }
  
  /* Ensure proper touch scrolling on mobile */
  .message-container-wrapper {
    position: relative;
    overflow: hidden;
  }
  
  /* Prevent layout issues on mobile keyboards */
  .message-item {
    contain: layout style;
  }
}

/* Optimized prose class to eliminate complex selector patterns */
.prose-unlimited {
  max-width: none !important;
}

/* GPU-optimized transitions */
.transition-gpu {
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  transform: translateZ(0);
}

/* Reduce reflow during mount/unmount */
.message-container-wrapper {
  contain: layout style;
  will-change: auto;
}

/* Optimize message rendering */
.message-item {
  contain: content;
  content-visibility: auto;
}

/* Critical animation escape hatch for performance modes */
.critical-animation {
  animation: inherit !important;
  transition: inherit !important;
}

/* Disable transitions during streaming to prevent flicker */
.is-streaming * {
  transition: none !important;
}

/* Reduce prose spacing for more compact messages - scoped to message items only */
.message-item .prose > *:first-child {
  margin-top: 0 !important;
}

.message-item .prose > *:last-child {
  margin-bottom: 0 !important;
}

.message-item .prose p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.message-item .prose ul, .message-item .prose ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.message-item .prose li {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.message-item .prose pre {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.message-item .prose h1, .message-item .prose h2, .message-item .prose h3, 
.message-item .prose h4, .message-item .prose h5, .message-item .prose h6 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.message-item .prose blockquote {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

/* Thinking block styles for improved UX */
.thinking-block {
  position: relative;
}

.thinking-block button {
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.thinking-block button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Smooth expand/collapse animation using CSS Grid trick */
.thinking-content-expand {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease-out, opacity 0.25s ease-out;
  animation: thinkingSlideIn 0.25s ease-out;
}

@keyframes thinkingSlideIn {
  from {
    grid-template-rows: 0fr;
    opacity: 0;
  }
  to {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}

.thinking-content-expand > * {
  overflow: hidden;
}

/* Touch-friendly on mobile */
@media (hover: none) and (pointer: coarse) {
  .thinking-block button {
    min-height: 44px;
    padding: 12px 16px;
  }
}

/* Highlight effect for keyboard navigation */
.highlight-prompt {
  animation: highlightPulse 1s ease-out;
}

@keyframes highlightPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 59, 130, 246), 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(var(--primary-rgb, 59, 130, 246), 0.1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 59, 130, 246), 0);
  }
}
/* WaitingIndicator - minimal styles for braille spinner */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .waiting-indicator-spinner {
    animation: none !important;
  }
}

.json-view {
	display: block;
	color: #4d4d4d;
	text-align: left;
	--json-property: #009033;
	--json-index: #676dff;
	--json-number: #676dff;
	--json-string: #b2762e;
	--json-boolean: #dc155e;
	--json-null: #dc155e;
}
.json-view .json-view--property {
	color: var(--json-property);
}
.json-view .json-view--index {
	color: var(--json-index);
}
.json-view .json-view--number {
	color: var(--json-number);
}
.json-view .json-view--string {
	color: var(--json-string);
}
.json-view .json-view--boolean {
	color: var(--json-boolean);
}
.json-view .json-view--null {
	color: var(--json-null);
}

.json-view .jv-indent {
	padding-left: 1em;
}
.json-view .jv-chevron {
	display: inline-block;
	vertical-align: -20%;
	cursor: pointer;
	opacity: 0.4;
	width: 1em;
	height: 1em;
}
:is(.json-view .jv-chevron:hover, .json-view .jv-size:hover + .jv-chevron) {
	opacity: 0.8;
}
.json-view .jv-size {
	cursor: pointer;
	opacity: 0.4;
	font-size: 0.875em;
	font-style: italic;
	margin-left: 0.5em;
	vertical-align: -5%;
	line-height: 1;
}

.json-view :is(.json-view--copy, .json-view--edit),
.json-view .json-view--link svg {
	display: none;
	width: 1em;
	height: 1em;
	margin-left: 0.25em;
	cursor: pointer;
}

.json-view .json-view--input {
	width: 120px;
	margin-left: 0.25em;
	border-radius: 4px;
	border: 1px solid currentColor;
	padding: 0px 4px;
	font-size: 87.5%;
	line-height: 1.25;
	background: transparent;
}
.json-view .json-view--deleting {
	outline: 1px solid #da0000;
	background-color: #da000011;
	-webkit-text-decoration-line: line-through;
	        text-decoration-line: line-through;
}

:is(.json-view:hover, .json-view--pair:hover) > :is(.json-view--copy, .json-view--edit),
:is(.json-view:hover, .json-view--pair:hover) > .json-view--link svg {
	display: inline-block;
}

.json-view .jv-button {
	background: transparent;
	outline: none;
	border: none;
	cursor: pointer;
	color: inherit;
}
.json-view .cursor-pointer {
	cursor: pointer;
}

.json-view svg {
	vertical-align: -10%;
}
.jv-size-chevron ~ svg {
	vertical-align: -16%;
}

/* Themes */
.json-view_a11y {
	color: #545454;
	--json-property: #aa5d00;
	--json-index: #007299;
	--json-number: #007299;
	--json-string: #008000;
	--json-boolean: #d91e18;
	--json-null: #d91e18;
}
.json-view_github {
	color: #005cc5;
	--json-property: #005cc5;
	--json-index: #005cc5;
	--json-number: #005cc5;
	--json-string: #032f62;
	--json-boolean: #005cc5;
	--json-null: #005cc5;
}
.json-view_vscode {
	color: #005cc5;
	--json-property: #0451a5;
	--json-index: #0000ff;
	--json-number: #0000ff;
	--json-string: #a31515;
	--json-boolean: #0000ff;
	--json-null: #0000ff;
}
.json-view_atom {
	color: #383a42;
	--json-property: #e45649;
	--json-index: #986801;
	--json-number: #986801;
	--json-string: #50a14f;
	--json-boolean: #0184bc;
	--json-null: #0184bc;
}
.json-view_winter-is-coming {
	color: #0431fa;
	--json-property: #3a9685;
	--json-index: #ae408b;
	--json-number: #ae408b;
	--json-string: #8123a9;
	--json-boolean: #0184bc;
	--json-null: #0184bc;
}

/* Add these at the top of the file */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body {
  font-family: var(--font-sans);
  font-size: 0.8125rem; /* text-sm, reduced by 1pt from 0.875rem */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';  /* Enable Inter's modern features */
}

code, pre {
  font-family: var(--font-mono);
}

/* Base styles */
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Layout */
.flex-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.main-content {
  flex-grow: 1;
  overflow: auto;
  background-color: #f0f4f8;
}

.footer {
  flex-shrink: 0;
}

/* Common styles */
.bg-light { background-color: #ffffff; }
.bg-dark { background-color: #222529; }
.text-dark { color: #16181a; }
.text-light { color: #ecf0f1; }
.rounded-lg { border-radius: 0.5rem; }
.shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.border { border: 1px solid #e5e7eb; }
.overflow-hidden { overflow: hidden; }

/* Hover and transition effects */
.hover\:bg-gray-300:hover { background-color: #d1d5db; }
.hover\:bg-gray-600:hover { background-color: #4b5563; }
.transition { transition: all 0.3s ease-in-out; }

/* Button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem; /* reduced from 1rem */
  font-weight: 500;
  border-radius: 0.375rem;
  transition: background-color 0.3s;
}

.btn-primary {
  background-color: #1d4ed8;
  color: #ffffff;
}

.btn-primary:hover { background-color: #2563eb; }

.btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

.btn-danger:hover { background-color: #e11d48; }

/* Typography */
h3, h4 {
  color: #1b1e23;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.agent-panel-heading, .thread-panel-heading, .main-heading {
  font-size: 1.0875rem; /* reduced from 1.15rem */
  font-weight: 700;
  color: #2c3e50;
}

/* List styles */
ul, ol {
  padding-left: 20px;
  margin: 10px 0;
}

ul { list-style-type: disc; }
ol { list-style-type: decimal; }

ul ul { list-style-type: circle; }
ul ul ul { list-style-type: square; }
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: lower-roman; }

ul ul, ul ul ul, ol ol, ol ol ol {
  padding-left: 1.5rem;
}

li { margin: 0.5rem 0; }

/* Utility classes */
.cursor-not-allowed { cursor: not-allowed; }

/* Thread styles */
.thread-container { background-color: #ffffff; }
.thread-heading { color: #2c3e50; }

.inactive-thread {
  background-color: #f0f4f8;
  color: #2c3e50;
}

.inactive-thread:hover { background-color: #e5e7eb; }

.active-thread {
  background-color: #dbeafe;
  color: #1d4ed8;
  font-weight: bold;
  border-left: 4px solid #1d4ed8;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

/* Premium micro-animations */
@keyframes subtle-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
}

@keyframes button-press {
  0% { transform: scale(1); }
  50% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

@keyframes card-lift {
  0% { transform: translateY(0) scale(1); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
  100% { transform: translateY(-2px) scale(1.01); box-shadow: 0 8px 16px rgba(0,0,0,0.1); }
}

/* Enhanced button interactions */
button {
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

button:active:not(:disabled) {
  animation: button-press 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card hover effects */
.hover-lift {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  animation: card-lift 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Enhanced focus indicators for accessibility */
:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--primary, #1d4ed8);
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary, #1d4ed8);
  outline-offset: -1px;
}

/* Skip to content link for keyboard navigation */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary, #1d4ed8);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  z-index: 9999;
}

.skip-to-content:focus {
  top: 0;
}

/* Skeleton loading animation */
@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.animate-skeleton-pulse {
  animation: skeleton-pulse 2s ease-in-out infinite;
}

/* Theme transition overlay */
@keyframes theme-switch {
  0% { opacity: 0; transform: scale(0.95); }
  50% { opacity: 0.1; }
  100% { opacity: 0; transform: scale(1); }
}

.theme-transition::after {
  content: '';
  position: fixed;
  inset: 0;
  background: currentColor;
  pointer-events: none;
  animation: theme-switch 400ms ease-out;
  z-index: 9998;
}