@import "tailwindcss";

:root {
  /* Warm Paper Design - Light Mode */
  --background: hsl(40, 30%, 97%);
  --foreground: hsl(30, 15%, 15%);
  --muted: hsl(35, 15%, 60%);
  --muted-foreground: hsl(30, 12%, 45%);
  --border: hsl(35, 15%, 85%);
  --card: hsl(40, 25%, 95%);
  --card-hover: hsl(40, 20%, 92%);
  --accent: hsl(35, 20%, 88%);
  --accent-hover: hsl(35, 25%, 82%);
  --accent-foreground: hsl(30, 15%, 15%);
  --success: hsl(142, 50%, 40%);
  --warning: hsl(38, 92%, 50%);
  --error: hsl(0, 65%, 50%);
  --ring: hsl(30, 20%, 25%);
}

.dark {
  /* Warm Paper Design - 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(35, 8%, 18%);
  --accent-hover: hsl(35, 10%, 22%);
  --accent-foreground: hsl(40, 20%, 92%);
  --success: hsl(142, 45%, 45%);
  --warning: hsl(38, 85%, 55%);
  --error: hsl(0, 60%, 55%);
  --ring: hsl(35, 15%, 70%);
}

@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, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans), system-ui, sans-serif;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

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

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

/* 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;
}

/* 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;
}

/* 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%;
  }
}