src/styles/main.css

@import "./highlight-js.css" layer(base);

@import "tailwindcss";

@plugin "tailwind-scrollbar" {
	nocompatible: true;
}
@plugin "@tailwindcss/typography";

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

@theme {
	--color-gray-50: #fafafa;
	--color-gray-100: #f5f5f5;
	--color-gray-200: #e5e5e5;
	--color-gray-300: #d4d4d4;
	--color-gray-400: #a3a3a3;
	--color-gray-500: #737373;
	--color-gray-600: #454545;
	--color-gray-700: #2e2e2e;
	--color-gray-800: #1a1a1a;
	--color-gray-900: #0a0a0a;
	--color-gray-950: #000000;

	--text-xxs: 0.625rem;
	--text-smd: 0.94rem;
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		border-color: var(--color-gray-200, currentcolor);
	}

	button:not(:disabled),
	[role="button"]:not(:disabled) {
		cursor: pointer;
	}

	::placeholder {
		color: var(--color-gray-400);
		opacity: 1;
	}
}

html,
body {
	overscroll-behavior: none;
	touch-action: pan-x pan-y;
}

@utility btn {
	@apply inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap outline-hidden transition-all select-none focus:ring-3 focus:ring-blue-500/50 disabled:cursor-default;
}

@utility active-model {
	/* Ensure active border wins over defaults/utilities in both themes */
	@apply border-black! dark:border-white/60!;
}

@utility file-hoverable {
	@apply hover:bg-gray-500/10;
}

@utility base-tool {
	@apply flex h-[1.6rem] items-center gap-[.2rem] border border-transparent text-xs whitespace-nowrap outline-hidden transition-all focus:outline-hidden active:outline-hidden sm:hover:text-purple-600 dark:hover:text-gray-300;
}

@utility active-tool {
	@apply rounded-full border-purple-200! bg-purple-100 pr-2 pl-1 text-purple-600 hover:text-purple-600 dark:border-purple-700! dark:bg-purple-600/40 dark:text-purple-200;
}

@utility scrollbar-custom {
	@apply scrollbar-thin scrollbar-thumb-black/10 scrollbar-track-transparent scrollbar-thumb-rounded-full dark:scrollbar-thumb-white/10 scrollbar-hover:scrollbar-thumb-black/20 dark:scrollbar-hover:scrollbar-thumb-white/20;

	&::-webkit-scrollbar {
		background-color: transparent;
		width: 8px;
		height: 8px;
	}

	&::-webkit-scrollbar-thumb {
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 9999px;
	}

	.dark &::-webkit-scrollbar {
		background-color: rgba(17, 17, 17, 0.85);
	}

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

	/* Rounded top/bottom caps for vertical scrollbars (Chrome/Edge/Safari) */
	&::-webkit-scrollbar-track {
		@apply rounded-full bg-clip-padding; /* clip bg to padding so caps look round */
		/* space for the end caps — tweak with Tailwind spacing */
		border-top: --spacing(2) solid transparent; /* 0.5rem */
		border-bottom: --spacing(2) solid transparent; /* 0.5rem */
	}

	/* Rounded left/right caps for horizontal scrollbars */
	&::-webkit-scrollbar-track:horizontal {
		@apply rounded-full bg-clip-padding;
		border-left: --spacing(2) solid transparent;
		border-right: --spacing(2) solid transparent;
		border-top-width: 0;
		border-bottom-width: 0;
	}
}

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

/*
  Typography overrides, previously theme.extend.typography in tailwind.config.cjs plus
  prose tweaks in @layer utilities. They live OUTSIDE Tailwind's cascade layers on purpose:
  unlayered rules beat the layered plugin defaults, which restores the v3 cascade where the
  config values were merged into the generated `.prose` class itself.
*/
.prose {
	--tw-prose-body: var(--color-gray-700);
	--tw-prose-headings: var(--color-gray-900);
	--tw-prose-lead: var(--color-gray-600);
	--tw-prose-links: var(--color-gray-900);
	--tw-prose-bold: var(--color-gray-900);
	--tw-prose-counters: var(--color-gray-500);
	--tw-prose-bullets: var(--color-gray-300);
	--tw-prose-hr: var(--color-gray-200);
	--tw-prose-quotes: var(--color-gray-900);
	--tw-prose-quote-borders: var(--color-gray-200);
	--tw-prose-captions: var(--color-gray-500);
	--tw-prose-kbd: var(--color-gray-900);
	--tw-prose-kbd-shadows: 10 10 10;
	--tw-prose-code: var(--color-gray-900);
	--tw-prose-pre-code: var(--color-gray-200);
	--tw-prose-pre-bg: var(--color-gray-800);
	--tw-prose-th-borders: var(--color-gray-300);
	--tw-prose-td-borders: var(--color-gray-200);
	/* gray-300 reads too bright for body text on dark backgrounds, but gray-400 is
	   too dim — split the difference (~#bcbcbc). */
	--tw-prose-invert-body: color-mix(in srgb, var(--color-gray-300) 50%, var(--color-gray-400));
	/* The plugin defaults headings/links/bold/code/kbd to pure white in dark mode,
	   which glows against the dimmed body — cap the emphasis tier at gray-200. */
	--tw-prose-invert-headings: var(--color-gray-200);
	--tw-prose-invert-lead: var(--color-gray-400);
	--tw-prose-invert-links: var(--color-gray-200);
	--tw-prose-invert-bold: var(--color-gray-200);
	--tw-prose-invert-counters: var(--color-gray-400);
	--tw-prose-invert-bullets: var(--color-gray-600);
	--tw-prose-invert-hr: var(--color-gray-700);
	--tw-prose-invert-quotes: var(--color-gray-200);
	--tw-prose-invert-quote-borders: var(--color-gray-700);
	--tw-prose-invert-captions: var(--color-gray-400);
	--tw-prose-invert-kbd: var(--color-gray-200);
	--tw-prose-invert-code: var(--color-gray-200);
	--tw-prose-invert-pre-code: var(--color-gray-300);
	--tw-prose-invert-th-borders: var(--color-gray-600);
	--tw-prose-invert-td-borders: var(--color-gray-700);
}

/*
  The unlayered `.prose` override above would otherwise beat the plugin's layered
  `prose-invert` remap, so restate it here (after the override) at the same level.
  This app only uses the `dark:` variant form, but cover the bare class too.
*/
.prose-invert,
.dark\:prose-invert:where(.dark, .dark *) {
	--tw-prose-body: var(--tw-prose-invert-body);
	--tw-prose-headings: var(--tw-prose-invert-headings);
	--tw-prose-lead: var(--tw-prose-invert-lead);
	--tw-prose-links: var(--tw-prose-invert-links);
	--tw-prose-bold: var(--tw-prose-invert-bold);
	--tw-prose-counters: var(--tw-prose-invert-counters);
	--tw-prose-bullets: var(--tw-prose-invert-bullets);
	--tw-prose-hr: var(--tw-prose-invert-hr);
	--tw-prose-quotes: var(--tw-prose-invert-quotes);
	--tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
	--tw-prose-captions: var(--tw-prose-invert-captions);
	--tw-prose-kbd: var(--tw-prose-invert-kbd);
	--tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
	--tw-prose-code: var(--tw-prose-invert-code);
	--tw-prose-pre-code: var(--tw-prose-invert-pre-code);
	--tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
	--tw-prose-th-borders: var(--tw-prose-invert-th-borders);
	--tw-prose-td-borders: var(--tw-prose-invert-td-borders);
}

.prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
	margin-top: 1em;
}

.prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
	margin-top: 0.8em;
}

.prose table {
	@apply scrollbar-thin block max-w-full scrollbar-thumb-black/10 scrollbar-track-transparent overflow-x-auto scrollbar-thumb-rounded-full dark:scrollbar-thumb-white/10 scrollbar-hover:scrollbar-thumb-black/20 dark:scrollbar-hover:scrollbar-thumb-white/20;
}

/* Prevent columns from squishing on narrow viewports; long content wraps instead of dominating. */
.prose :is(th, td) {
	min-width: 6rem;
	max-width: 16rem;
}

.prose hr {
	@apply my-4;
}

.prose strong {
	@apply font-medium;
}

.prose pre {
	/* font-mono restated because the typography plugin makes `pre code` inherit from `pre`,
	   and base-layer element styles (ChatInput) would otherwise turn `pre` sans-serif */
	@apply border-[0.5px] bg-white font-mono text-gray-600 dark:border-gray-700 dark:bg-gray-900! dark:bg-inherit dark:text-inherit;
}

.prose code:not(pre code) {
	@apply rounded-md bg-gray-200/60 px-[0.4em] py-[0.2em] text-[85%] dark:bg-gray-700;
}

.prose code:not(pre code)::before,
.prose code:not(pre code)::after {
	content: none;
}

/* Override prose-sm title sizes - 75% of original */
.prose-sm :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
	font-size: 1.6em; /* 75% */
	@apply font-semibold;
}

.prose-sm :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
	font-size: 1.07em; /* 75% */
	@apply font-semibold;
}

.prose-sm :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
	font-size: 0.96em; /* 75% */
	@apply font-semibold;
}

.prose-sm :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
	font-size: 0.8em; /* 75% */
	@apply font-semibold;
}

.prose-sm :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
	font-size: 0.75em; /* 75% */
	@apply font-semibold;
}

.prose-sm :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
	font-size: 0.7em; /* 75% */
	@apply font-semibold;
}

.katex-display {
	overflow: auto hidden;
}

.router-shimmer {
	display: inline-block;
	background-image: linear-gradient(
		90deg,
		rgba(156, 163, 175, 1) 0%,
		rgba(156, 163, 175, 0.6) 10%,
		rgba(156, 163, 175, 0.6) 50%,
		rgba(156, 163, 175, 0.6) 90%,
		rgba(156, 163, 175, 1) 100%
	);
	background-size: 220% 100%;
	animation: router-shimmer 2.8s linear infinite;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.dark .router-shimmer {
	background-image: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.15) 0%,
		rgba(255, 255, 255, 0.7) 50%,
		rgba(255, 255, 255, 0.15) 100%
	);
}

@keyframes router-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}