@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

@theme {
  --color-cream: #FBF7F0;
  --color-cream-dark: #F3EDE2;
  --color-warm-white: #FFFDF9;
  --color-amber-glow: #E8943A;
  --color-amber-soft: #F5C882;
  --color-amber-pale: #FFF0D6;
  --color-forest: #2D5A3D;
  --color-forest-light: #3D763A;
  --color-forest-pale: #E8F5E4;
  --color-charcoal: #2C2420;
  --color-warm-gray: #8A7E74;
  --color-sand: #D4C5B0;
  --color-sand-light: #E8DED0;
  --color-blush: #F2D1B3;
  --color-sidebar-bg: #2C2420;
  --color-sidebar-hover: #3D352F;
  --color-sidebar-active: #4A3F38;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--color-cream);
  color: var(--color-charcoal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-sand);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-warm-gray);
}

/* Markdown content styling in answer bubbles */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}
.markdown-content h1 { font-size: 1.25rem; }
.markdown-content h2 { font-size: 1.1rem; }
.markdown-content h3 { font-size: 1rem; }

.markdown-content p {
  margin: 0.5em 0;
  line-height: 1.65;
}

.markdown-content ul,
.markdown-content ol {
  padding-left: 1.5em;
  margin: 0.5em 0;
}

.markdown-content li {
  margin: 0.25em 0;
  line-height: 1.6;
}

.markdown-content code {
  background: rgba(0, 0, 0, 0.06);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.88em;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.markdown-content pre {
  background: var(--color-charcoal);
  color: #F3EDE2;
  padding: 1em;
  border-radius: 8px;
  overflow-x: auto;
  margin: 0.75em 0;
}

.markdown-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.markdown-content a {
  color: var(--color-forest);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.markdown-content blockquote {
  border-left: 3px solid var(--color-amber-glow);
  padding-left: 1em;
  margin: 0.75em 0;
  color: var(--color-warm-gray);
  font-style: italic;
}

/* Loading skeleton animation */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-sand-light) 25%,
    var(--color-cream) 50%,
    var(--color-sand-light) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}

/* Fade-in animation for messages */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-enter {
  animation: fadeSlideUp 0.35s ease-out forwards;
}

/* Subtle pulse for loading dots */
@keyframes catPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

.loading-dot {
  animation: catPulse 1.4s ease-in-out infinite;
}
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

/* Textarea focus glow */
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-amber-soft);
}
