/* CRITICAL */@import "tailwindcss"; :root {  /* Warm Paper Design v2 - Light Mode (High Readability) */  --background: hsl(40, 20%, 96%);  --foreground: hsl(30, 15%, 12%);  --muted: hsl(35, 10%, 35%);  --muted-foreground: hsl(35, 10%, 30%);  --border: hsl(35, 12%, 80%);  --card: hsl(40, 15%, 94%);  --card-hover: hsl(40, 12%, 90%);  --accent: hsl(270, 20%, 94%);  --accent-hover: hsl(270, 25%, 88%);  --accent-foreground: hsl(30, 15%, 10%);  --success: hsl(142, 50%, 35%);  --warning: hsl(38, 90%, 45%);  --error: hsl(0, 65%, 45%);  --ring: hsl(270, 60%, 50%);  --link: hsl(270, 50%, 50%);  --link-hover: hsl(270, 60%, 45%);  --accent-purple: hsl(270, 50%, 55%);  --accent-purple-shine: hsl(270, 60%, 60%);  --highlight: hsl(270, 50%, 55%);  --highlight-bg: hsl(270, 50%, 95%);} .dark {  /* Warm Paper Design v2 - Dark Mode */  --background: hsl(30, 5%, 10.5%);  --foreground: hsl(40, 20%, 92%);  --muted: hsl(30, 8%, 40%);  --muted-foreground: hsl(35, 12%, 60%);  --border: hsl(30, 5%, 20%);  --card: hsl(30, 5%, 12%);  --card-hover: hsl(30, 5%, 15%);  --accent: hsl(270, 25%, 22%);  --accent-hover: hsl(270, 30%, 28%);  --accent-foreground: hsl(40, 20%, 92%);  --success: hsl(142, 45%, 45%);  --warning: hsl(38, 85%, 55%);  --error: hsl(0, 60%, 55%);  --ring: hsl(270, 60%, 60%);  --link: hsl(270, 60%, 70%);  --link-hover: hsl(270, 65%, 75%);  --accent-purple: hsl(270, 50%, 55%);  --accent-purple-shine: hsl(270, 60%, 60%);  --highlight: hsl(270, 60%, 65%);  --highlight-bg: hsl(270, 30%, 18%);} @theme inline {  --color-background: var(--background);  --color-foreground: var(--foreground);  --font-sans: var(--font-geist-sans);  --font-mono: var(--font-geist-mono);} * {  border-color: var(--border);} html {  overflow: hidden;  height: 100%;} body {  overflow: hidden;  height: 100%;  max-width: 100vw;  width: 100%;} /* Mobile viewport fix */@media (max-width: 768px) {  /* Force everything to respect 100vw */  * {    max-width: 100vw;  }   /* Prevent horizontal overflow on mobile */  main,  article,  section,  div {    max-width: 100vw !important;  }   /* Fixed and absolute positioned elements */  [class*="fixed"],  [class*="absolute"] {    max-width: 100vw !important;  }   /* Constrain all content containers */  .max-w-3xl,  .max-w-4xl,  .max-w-5xl,  .max-w-6xl,  .max-w-7xl {    max-width: 100vw !important;    padding-left: 1rem !important;    padding-right: 1rem !important;  }   /* Ensure code blocks don't overflow */  pre,  code {    max-width: 100% !important;    overflow-x: auto;    word-break: break-word;  }   /* Constrain artifact and code containers */  .artifact-container,  .code-sandbox,  iframe {    max-width: calc(100vw - 2rem) !important;  }   /* Tables must respect viewport */  table {    max-width: 100% !important;    overflow-x: auto;    display: block;  }} body {  background: var(--background);  color: var(--foreground);  font-family: var(--font-sans), system-ui, sans-serif;} /* Links - consistent, less dominant */a {  color: var(--link);  text-decoration: none;  transition: color 0.15s ease;} a:hover {  color: var(--link-hover);  text-decoration: underline;} /* Navigation links should inherit their color from parent classes, not use link color */nav a,a.nav-link,[role="navigation"] a {  color: inherit;  text-decoration: none;} nav a:hover,a.nav-link:hover,[role="navigation"] a:hover {  color: inherit;  text-decoration: none;} /* Scrollbar - Premium thin design */::-webkit-scrollbar {  width: 6px;  height: 6px;} ::-webkit-scrollbar-track {  background: transparent;} ::-webkit-scrollbar-thumb {  background: var(--border);  border-radius: 9999px;} ::-webkit-scrollbar-thumb:hover {  background: var(--muted);} /* Thin scrollbar variant - invisible until hover */.scrollbar-thin {  scrollbar-width: thin;  scrollbar-color: transparent transparent;} .scrollbar-thin:hover {  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;} .scrollbar-thin::-webkit-scrollbar {  width: 3px;  height: 3px;} .scrollbar-thin::-webkit-scrollbar-track {  background: transparent;} .scrollbar-thin::-webkit-scrollbar-thumb {  background: transparent;  border-radius: 3px;} .scrollbar-thin:hover::-webkit-scrollbar-thumb {  background: rgba(255, 255, 255, 0.15);} .scrollbar-thin::-webkit-scrollbar-thumb:hover {  background: rgba(255, 255, 255, 0.25);} /* Hide scrollbar but keep functionality */.scrollbar-hidden {  scrollbar-width: none;  -ms-overflow-style: none;} .scrollbar-hidden::-webkit-scrollbar {  display: none;} /* Smooth scrolling */.scroll-smooth {  scroll-behavior: smooth;} /* Focus */:focus-visible {  outline: none;  ring: 2px solid var(--ring);  ring-offset: 2px;  ring-offset-color: var(--background);} /* Selection */::selection {  background: var(--accent);  color: var(--foreground);} /* Animations */@keyframes fade-in {  from {    opacity: 0;  }  to {    opacity: 1;  }} @keyframes slide-up {  from {    opacity: 0;    transform: translateY(8px);  }  to {    opacity: 1;    transform: translateY(0);  }} @keyframes pulse-soft {  0%,  100% {    opacity: 1;  }  50% {    opacity: 0.6;  }} .animate-fade-in {  animation: fade-in 0.2s ease-out;} .animate-slide-up {  animation: slide-up 0.3s ease-out;} .animate-pulse-soft {  animation: pulse-soft 2s ease-in-out infinite;} @keyframes bounce {  0%,  100% {    transform: translateY(0);    opacity: 0.6;  }  50% {    transform: translateY(-8px);    opacity: 1;  }} .animate-bounce {  animation: bounce 1.4s ease-in-out infinite;} /* Slide animations for mobile */@keyframes slide-in-left {  from {    opacity: 0;    transform: translateX(-100%);  }  to {    opacity: 1;    transform: translateX(0);  }} @keyframes slide-in-right {  from {    opacity: 0;    transform: translateX(100%);  }  to {    opacity: 1;    transform: translateX(0);  }} .animate-slide-in-left {  animation: slide-in-left 0.2s ease-out;} .animate-slide-in-right {  animation: slide-in-right 0.2s ease-out;} /* Premium spring animation for messages */@keyframes message-appear {  0% {    opacity: 0;    transform: translateY(12px) scale(0.98);  }  100% {    opacity: 1;    transform: translateY(0) scale(1);  }} .animate-message-appear {  animation: message-appear 0.35s cubic-bezier(0.22, 1, 0.36, 1);} /* Subtle glow for active elements */@keyframes subtle-glow {  0%,  100% {    box-shadow: 0 0 0 rgba(139, 115, 85, 0);  }  50% {    box-shadow: 0 0 20px rgba(139, 115, 85, 0.1);  }} .animate-subtle-glow {  animation: subtle-glow 3s ease-in-out infinite;} @keyframes chat-splash-float {  0%,  100% {    transform: translateY(0);  }  50% {    transform: translateY(-8px);  }} @keyframes chat-splash-spin {  from {    transform: rotate(0deg);  }  to {    transform: rotate(360deg);  }} @keyframes chat-splash-pulse {  0%,  100% {    transform: scale(0.96);    opacity: 0.35;  }  50% {    transform: scale(1.04);    opacity: 0.7;  }} .chat-splash-orb {  position: relative;  width: 64px;  height: 64px;  border-radius: 9999px;  background: radial-gradient(    120% 120% at 30% 20%,    hsla(270, 70%, 70%, 0.9),    hsla(270, 50%, 52%, 0.75) 45%,    hsla(30, 6%, 12%, 0.9) 80%  );  box-shadow:    0 16px 32px rgba(88, 74, 112, 0.35),    inset 0 0 14px rgba(255, 255, 255, 0.12);  animation: chat-splash-float 6s ease-in-out infinite;} .chat-splash-orb::before {  content: "";  position: absolute;  inset: -14px;  border-radius: 9999px;  background: conic-gradient(    from 0deg,    rgba(167, 139, 250, 0.45),    rgba(74, 222, 128, 0.25),    rgba(249, 115, 22, 0.15),    rgba(167, 139, 250, 0.45)  );  filter: blur(14px);  opacity: 0.45;  animation: chat-splash-spin 12s linear infinite;} .chat-splash-orb::after {  content: "";  position: absolute;  inset: -6px;  border-radius: 9999px;  border: 1px solid rgba(167, 139, 250, 0.35);  animation: chat-splash-pulse 4s ease-in-out infinite;} /* Scroll shadow indicators */.scroll-shadow-top {  box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, 0.3);} .scroll-shadow-bottom {  box-shadow: inset 0 -10px 10px -10px rgba(0, 0, 0, 0.3);} .scroll-shadow-both {  box-shadow:    inset 0 10px 10px -10px rgba(0, 0, 0, 0.3),    inset 0 -10px 10px -10px rgba(0, 0, 0, 0.3);} /* Gradient fade for text overflow */.text-fade-right::after {  content: "";  position: absolute;  right: 0;  top: 0;  bottom: 0;  width: 40px;  background: linear-gradient(to right, transparent, var(--card));  pointer-events: none;} /* Prevent zoom on input focus for iOS */@supports (-webkit-touch-callout: none) {  input,  textarea,  select {    font-size: 16px !important;  }} /* Mobile chat optimization */@media (max-width: 768px) {  .chat-input-area {    padding-bottom: env(safe-area-inset-bottom, 0);  }   /* Prevent body scroll when modal open */  body.modal-open {    overflow: hidden;    position: fixed;    width: 100%;  }   /* Increase base font size on mobile for better readability */  body {    font-size: 16px;  }   /* Ensure minimum touch target sizes (44x44px recommended by Apple/Google) */  button,  a[role="button"] {    min-height: 44px;    min-width: 44px;  }   /* Increase spacing for better readability */  .message-content p {

Lines 1–500 of 678. Load more