@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=JetBrains+Mono:wght@400;700&display=swap');
@import './styles/mica.css';
@import './styles/acrylic.css';

@import 'katex/dist/katex.min.css';

@font-face {
  font-family: 'Junicode';
  src: url('/fonts/Junicode-Bold.ttf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

/* Create a CSS class to use the font */
.junicode-bold {
  font-family: 'Junicode', system-ui;
  font-weight: 400;
  font-style: normal;
}

/* Jaini Google Font CSS class */
.jaini-regular {
  font-family: 'Jaini', system-ui;
  font-weight: 400;
  font-style: normal;
}

.baumans-regular {
  font-family: 'Baumans', system-ui;
  font-weight: 400;
  font-style: normal;
}

.germania-one-regular {
  font-family: 'Germania One', system-ui;
  font-weight: 400;
  font-style: normal;
}

.mono {
  font-family: 'JetBrains Mono', monospace;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delayed-1 {
  transition-delay: 0.1s;
}

.reveal-delayed-2 {
  transition-delay: 0.2s;
}

.reveal-delayed-3 {
  transition-delay: 0.3s;
}

.overflow-left {
  direction: rtl;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure dark variant is available globally and early */
@custom-variant dark (&:where(.dark, .dark *));
@custom-variant 2xl (@media (min-width: 1920px) and (max-width: 2559px));
@custom-variant 3xl (@media (min-width: 2560px) and (max-width: 3839px));
@custom-variant 4xl (@media (min-width: 3840px));
@custom-variant hidpi (@media (min-resolution: 144dpi));
@custom-variant retina (@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi));
@import 'tailwindcss';
@plugin "@tailwindcss/typography";
/* Override Tailwind v4 default font stack */
@theme {
  --font-sans: 'DM Sans', Inter, system-ui, sans-serif;
  --font-inter: 'Inter', system-ui, sans-serif;
}

@theme {
  --breakpoint-2xl: initial;
}

/* Highlight.js base theme for rehype-highlight
   We import the light theme unconditionally, then provide .dark-scoped overrides below.
   This ensures manual dark mode (toggling the `.dark` class) also switches syntax colors. */
@import 'highlight.js/styles/atom-one-light.css';

@layer base {
  html {
    font-family: var(--font-sans);
  }

  /* Transparent body background to let page backgrounds show through */
  body {
    background-color: transparent;
  }

  /* Pixel density normalization for high-DPI displays */
  /* This helps ensure consistent rendering across different pixel densities */
  @media (min-resolution: 144dpi) {
    html {
      /* Slightly reduce base font size on high-DPI displays to compensate for OS scaling */
      font-size: 15px;
    }
  }

  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    html {
      /* Further reduce on retina/2x displays */
      font-size: 14px;
    }
  }

  /* Reset to standard on very large high-DPI displays (like 4K monitors) */
  @media (min-width: 2560px) and (min-resolution: 144dpi) {
    html {
      font-size: 16px;
    }
  }

  /* Ensure full height for SPA layout to prevent scrolling issues */
  html,
  body,
  #root {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

/* Markdown code styling */
.prose pre:not(.not-prose) {
  @apply bg-gray-100 text-gray-800 dark:bg-neutral-800 dark:text-neutral-100 p-3 overflow-x-auto;
}

.prose :not(pre) > code {
  /* Inline code should be visually distinct from blocks and stay inline */
  @apply inline bg-gray-200 text-gray-800 dark:bg-neutral-900 dark:text-neutral-100 rounded px-1 py-0.5 whitespace-pre-wrap;
  /* Ensure background/padding only wrap the actual text across soft wraps */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Safety net: handle nested inline code (e.g., p > strong > code) and force inline layout */
.prose :not(pre) code {
  display: inline !important;
  width: auto !important;
  max-width: max-content;
}

/* Inline code cleaned above; code inside pre is left unstyled here */

/* Dark mode adjustments */
.dark .prose pre:not(.not-prose) {
  @apply bg-neutral-900 text-neutral-100 border-neutral-800;
}

.dark .prose :not(pre) > code {
  @apply bg-neutral-800 text-neutral-100;
}

/* Ensure nested inline code stays inline in dark mode too */
.dark .prose :not(pre) code {
  display: inline !important;
  width: auto !important;
}

/* Fix: Remove highlight.js background/padding on code element inside blocks. We style the <pre> instead. */
.prose pre code.hljs {
  background: transparent !important;
  padding: 0 !important;
}

/* Nuke any nested token backgrounds inside highlighted code */
.prose pre code.hljs *,
.prose pre .hljs *,
.prose pre .hljs {
  background: transparent !important;
}

/* code inside pre inherits pre styles; no extra styling here */

/* Remove backticks that typography plugin injects for code blocks */
.prose pre code::before,
.prose pre code::after {
  content: none !important;
}

.dark .prose pre code::before,
.dark .prose pre code::after {
  content: none !important;
}

/* Also remove injected backticks for inline code */
.prose :not(pre) > code::before,
.prose :not(pre) > code::after {
  content: none !important;
}

/* Global safety (minimal): let pre control visuals */
pre > code {
  background: transparent;
}

/* Keep code blocks reliably selectable even when syntax highlighting adds nested spans */
.prose pre,
.prose pre code,
.prose pre code * {
  -webkit-user-select: text;
  user-select: text;
}

/* Dark-mode highlight.js token overrides (approx. Atom One Dark) */
/* These only apply when the root has `.dark` class, enabling manual dark toggle compatibility */
.dark .hljs {
  color: #abb2bf;
  /* base text */
}

.dark .hljs-comment,
.dark .hljs-quote {
  color: #5c6370;
  /* muted */
  font-style: italic;
}

.dark .hljs-keyword,
.dark .hljs-operator {
  color: #c678dd;
}

.dark .hljs-variable,
.dark .hljs-template-variable,
.dark .hljs-attr,
.dark .hljs-symbol,
.dark .hljs-builtin-name,
.dark .hljs-link,
.dark .hljs-selector-id,
.dark .hljs-selector-class {
  color: #e06c75;
}

.dark .hljs-number,
.dark .hljs-literal,
.dark .hljs-type,
.dark .hljs-built_in,
.dark .hljs-bullet {
  color: #d19a66;
}

.dark .hljs-string,
.dark .hljs-doctag,
.dark .hljs-addition {
  color: #98c379;
}

.dark .hljs-title,
.dark .hljs-section,
.dark .hljs-name,
.dark .hljs-selector-tag,
.dark .hljs-tag .hljs-attribute {
  color: #61afef;
}

.dark .hljs-meta,
.dark .hljs-subst {
  color: #56b6c2;
}

.dark .hljs-deletion {
  color: #e06c75;
}

.dark .hljs-emphasis {
  font-style: italic;
}

.dark .hljs-strong {
  font-weight: 700;
}

/* Disable text selection globally while panning/drag-selecting in Heimdall */
body.ygg-no-select,
body.ygg-no-select * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Slow pulse for Heimdall currentPath highlight */
@keyframes ygg-pulse {
  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 0.6;
  }
}

.animate-pulse-slow {
  animation: ygg-pulse 4s ease-in-out infinite;
}

/* Color cycling animation for Heimdall currentPath line */
@keyframes ygg-color-cycle {
  0%,
  100% {
    stroke: #ffffff;
  }

  50% {
    stroke: #fafafa;
  }
}

.animate-color-cycle {
  animation: ygg-color-cycle 4s ease-in-out infinite;
}

/* Stroke color pulse for dark mode (neutral-50 to neutral-700) */
@keyframes ygg-stroke-pulse-dark {
  0%,
  100% {
    stroke: #fafafa;
    /* neutral-50 */
  }

  50% {
    stroke: #404040;
    /* neutral-700 */
  }
}

.dark .animate-stroke-pulse {
  animation: ygg-stroke-pulse-dark 4s ease-in-out infinite;
}

/* Scale-in animation for mobile options menu */
@keyframes ygg-scale-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scale-in {
  animation: ygg-scale-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@utility no-scrollbar {
  @apply [scrollbar-width:none] [&::-webkit-scrollbar]:hidden;
}

/* Thin scrollbar utility */
.thin-scrollbar {
  /* Firefox */
  scroll-padding-top: 4px;
  scroll-padding-bottom: 4px;
  scrollbar-color: #c5c5c5;
  /* Hidden by default */
}

.thin-scrollbar:hover {
  /* Firefox - show on hover */
  scrollbar-color: #c5c5c5;
  /* light: neutral-400 thumb on transparent track */
}

/* Chromium/WebKit */
.thin-scrollbar::-webkit-scrollbar {
  width: 10px;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
  background-color: transparent;
  /* Hidden by default */
  border-radius: 20px;
  border: 0.5px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(90, 90, 90, 0.02);
  transition: background-color 0.2s ease-in-out;
  /* background-clip: padding-box; */
}

.thin-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: #c5c5c5;
  /* light: neutral-400 - visible on hover */
}

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

.thin-scrollbar::-webkit-scrollbar-button {
  width: 0px;
}

/* Dark mode overrides */
.dark .thin-scrollbar {
  /* Firefox */
  scrollbar-color: transparent transparent;
  /* Hidden by default */
}

.dark .thin-scrollbar:hover {
  /* Firefox - show on hover */
  scrollbar-color: #262626 transparent;
  /* dark: neutral-800 thumb on transparent track */
}

.dark .thin-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: #262626;
  /* dark: neutral-800 - visible on hover */
}

/* Utility: multi-line clamp without Tailwind plugin */
.ygg-line-clamp-6 {
  display: -webkit-box;
  line-clamp: 6;
  /* standard property for compatibility */
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ygg-line-clamp-15 {
  display: -webkit-box;
  line-clamp: 15;
  /* standard property for compatibility */
  -webkit-line-clamp: 15;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scroll-fade-container {
  position: relative;
  height: 100%;
  --scroll-fade-light: rgba(235, 235, 235, 0.181);
  --scroll-fade-dark: rgba(24, 24, 24, 0.148);
}

.project-list {
  height: 100%;
  overflow-y: auto;
}

.scroll-fade-overlay {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  /* adjust fade height */
  pointer-events: none;
  /* don’t block clicks on items */
  z-index: 10;
}

.scroll-fade-overlay--top {
  top: 0.5px;
  background: linear-gradient(to bottom, var(--scroll-fade-light), transparent);
}

.scroll-fade-overlay--bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--scroll-fade-light), transparent);
}

.dark .scroll-fade-overlay--top {
  background: linear-gradient(to bottom, var(--scroll-fade-dark), transparent);
}

.dark .scroll-fade-overlay--bottom {
  background: linear-gradient(to top, var(--scroll-fade-dark), transparent);
}

@theme {
  --color-yPink-50: #a67899;
  --color-yPink-100: #976288;
  --color-yPink-200: #a64d79;
  --color-yPink-300: #853e61;
  --color-yPink-400: #6a1e55;
  --color-yPink-500: #5f1b4d;
  --color-yPink-600: #551844;
  --color-yPink-700: #4a153b;
  --color-yPink-800: #401233;
  --color-yPink-900: #350f2b;
  --color-secondary-50: #55414a;
  --color-secondary-100: #887a80;
  --color-secondary-200: #55414a;
  --color-secondary-300: #77676e;
  --color-secondary-400: #66545c;
  --color-secondary-500: #55414a;
  --color-secondary-600: #44343b;
  --color-secondary-700: #362a2f;
  --color-secondary-800: #302429;
  --color-secondary-900: #1b1518;
  --color-yPurple-50: #e4cad7;
  --color-yPurple-100: #c182a1;
  --color-yPurple-200: #c182a1;
  --color-yPurple-300: #a64d79;
  --color-yPurple-400: #5e4d6a;
  --color-yPurple-500: #4c3959;
  --color-yBrown-50: #b6a9a2;
  --color-yBrown-400: #6c5345;
  --color-yBrown-500: #5c4030;
  --color-yBlack-100: #4c394c;
  --color-yBlack-500: #1a1a1d;
  --color-yBlack-600: #242424;
  --color-yBlack-700: #1c1c1c;
  --color-yBlack-800: #161616;
  --color-yBlack-900: #121111;
  --color-fblue-100: #c5d0d8;
  --color-fblue-200: #a5bfd7;
  --color-fblue-300: #a1b6d2;
  --color-vtesto-100: #ff5f05;
  --color-vtestb-100: #a5bfd7;
  --color-vtestb-200: #004479;
  --color-pureWhite-100: #ffffff;
  --color-pureWhite-200: #fafafa;
  --color-titlebar-500: #080f23;
}

/* SVG Filter Definitions for Liquid Glass Effect */
@layer utilities {
  html::after {
    content: '';
    display: none;
  }
}

/* Use a pseudo-element to inject SVG filters */
html {
  --svg-filters: '';
}

@supports selector(html::after) {
  /* SVG filters are defined inline in the HTML where the effect is used */
  /* Or injected dynamically via JavaScript if needed */
}

.smooth-height {
  transition: height 0.3s ease-out;
  overflow: hidden;
}

/* Modern browsers only */
@supports (interpolate-size: allow-keywords) {
  .smooth-height {
    interpolate-size: allow-keywords;
  }
}

/* Tool call expand animation using grid-template-rows trick */
.tool-expand-container {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.tool-expand-container.open {
  grid-template-rows: 1fr;
}

.tool-expand-content {
  min-height: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tool-expand-container.open .tool-expand-content {
  opacity: 1;
}

/* Tool call chevron rotation */
.tool-chevron {
  transition: transform 0.2s ease;
}

.tool-chevron.open {
  transform: rotate(90deg);
}

/* Slate input wrapper glassmorphism effect */
.slate-input-wrapper {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Slate icon control button base style */
.slate-icon-ctrl {
  background: transparent;
  border: none;
  color: #737373;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.slate-icon-ctrl:hover {
  color: #e5e5e5;
  background: rgba(255, 255, 255, 0.05);
}

.dark .slate-icon-ctrl {
  color: #525252;
}

.dark .slate-icon-ctrl:hover {
  color: #e5e5e5;
  background: rgba(255, 255, 255, 0.05);
}

/* Slate select dropdown style */
.slate-select {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
  color: #737373;
  font-size: 12px;
}

.slate-select:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e5e5e5;
}

.slate-select-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #3b82f6;
  opacity: 0.8;
}

/* Minimal running-state treatment for chat process/tool labels. */
@keyframes tool-name-shimmer {
  0%,
  12% {
    background-position: 150% 50%;
  }

  72%,
  100% {
    background-position: -150% 50%;
  }
}

@layer utilities {
  .tool-name-shimmer {
    --tool-shimmer-base: rgb(115 115 115);
    --tool-shimmer-glint: rgb(212 212 212);
    color: transparent;
    background-image: linear-gradient(
      110deg,
      var(--tool-shimmer-base) 0%,
      var(--tool-shimmer-base) 40%,
      var(--tool-shimmer-glint) 50%,
      var(--tool-shimmer-base) 60%,
      var(--tool-shimmer-base) 100%
    );
    background-size: 260% 100%;
    background-position: 150% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: tool-name-shimmer 2.4s linear 320ms infinite;
  }

  .dark .tool-name-shimmer {
    --tool-shimmer-base: rgb(115 115 115);
    --tool-shimmer-glint: rgb(245 245 245);
  }

  @media (prefers-reduced-motion: reduce) {
    .tool-name-shimmer {
      animation: none;
      color: rgb(115 115 115);
      background-image: none;
    }

    .dark .tool-name-shimmer {
      color: rgb(163 163 163);
    }
  }
}

/* Edit diff expansion animation: defined once globally to avoid per-row <style> tags in virtualized lists. */
@keyframes edit-diff-slide-down {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.edit-diff-slide-down {
  animation: edit-diff-slide-down 120ms ease-out;
  will-change: opacity, transform;
}

.edit-diff-animations-disabled .edit-diff-slide-down {
  animation: none !important;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .edit-diff-slide-down {
    animation: none !important;
    will-change: auto;
  }
}

@keyframes ygg-chat-stream-item-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.chat-stream-item-fade-in {
  opacity: 0;
  animation: ygg-chat-stream-item-fade-in 500ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .chat-stream-item-fade-in {
    opacity: 1;
    animation: none;
  }
}
