/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ============================================
   GLOBAL CURSOR POINTER FOR INTERACTIVE ELEMENTS
   ============================================ */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
label[for],
select,
summary {
  cursor: pointer;
}

/* ============================================
   THEME SYSTEM - Dark Mode Support
   Matching landing page aesthetic with slate/blue-gray tones
   ============================================ */

/* Dark mode styles */
html.dark body {
  background-color: #111827;
  color: white;
}

html.dark .bg-gray-50 {
  background-color: #111827 !important;
}

html.dark .bg-gray-100 {
  background-color: #1a2332 !important;
}

html.dark .bg-white {
  background-color: #1f2937 !important;
}

html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700 {
  color: white !important;
}

html.dark .text-gray-600,
html.dark .text-gray-500 {
  color: #90adcb !important;
}

/* Indigo text in info boxes */
html.dark .text-indigo-800,
html.dark .text-indigo-900 {
  color: #c7d2fe !important;
}

/* Red border for danger zones */
html.dark .border-red-200,
html.dark .border-red-300 {
  border-color: #f87171 !important;
}

html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-gray-400 {
  border-color: #3b4a5a;
}

/* Input fields and form elements - visible borders */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #e5e7eb; /* gray-200 for light mode */
}

/* Dark mode input styling */
html.dark input,
html.dark textarea,
html.dark select {
  border-color: #4b5e75 !important;
  background-color: #1a2332 !important;
  color: white !important;
}

/* Date/time picker icon - invert for dark mode */
html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #6b7280 !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: #6366f1 !important;
}

html.dark input:disabled,
html.dark textarea:disabled,
html.dark select:disabled {
  background-color: #111827 !important;
  color: #6b7280 !important;
}

html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover {
  background-color: #223649;
}

html.dark .hover\:bg-indigo-50:hover,
html.dark .bg-indigo-50 {
  background-color: rgba(99, 102, 241, 0.15);
}

/* Elevated surfaces (dropdowns, cards) */
html.dark .dropdown-menu {
  background-color: #1f2937;
  border-color: #223649;
}

html.dark .rounded-2xl.bg-white,
html.dark .rounded-xl.bg-white {
  background-color: #1f2937;
}

/* Footer */
html.dark .border-t.border-gray-200.bg-gray-50 {
  background-color: #111827;
  border-color: #223649;
}

/* Shadows - deeper for dark mode */
html.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

html.dark .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

/* Light backgrounds (-50 shades) - for cards and alerts */
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; }
html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.15) !important; }
html.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.15) !important; }
html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.15) !important; }
html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.15) !important; }
html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.15) !important; }
html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.25) !important; }
html.dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.15) !important; }

/* Hover states for -50 backgrounds */
html.dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.2) !important; }
html.dark .hover\:bg-green-50:hover { background-color: rgba(34, 197, 94, 0.2) !important; }

/* Emerald borders for flash messages */
html.dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.4) !important; }

/* Icon backgrounds - more vibrant for dark mode */
html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.35) !important; }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.35) !important; }
html.dark .bg-cyan-100 { background-color: rgba(6, 182, 212, 0.35) !important; }
html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.35) !important; }
html.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.35) !important; }
html.dark .bg-sky-100 { background-color: rgba(14, 165, 233, 0.35) !important; }
html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.35) !important; }
html.dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.35) !important; }
html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.35) !important; }
html.dark .bg-gray-100 {
  background-color: #2a3544 !important;
}
html.dark .bg-gray-200 {
  background-color: #374151 !important;
}
html.dark .bg-gray-300 {
  background-color: #6b7280 !important;
}

/* Colored borders for onboarding steps */
html.dark .border-green-100 { border-color: rgba(34, 197, 94, 0.3) !important; }
html.dark .border-indigo-100 { border-color: rgba(99, 102, 241, 0.3) !important; }

/* Status/badge colored backgrounds - keep solid for icons */
html.dark .bg-green-500 { background-color: #22c55e !important; }
html.dark .bg-green-600 { background-color: #16a34a !important; }
html.dark .bg-blue-500 { background-color: #3b82f6 !important; }
html.dark .bg-blue-600 { background-color: #2563eb !important; }
html.dark .bg-red-500 { background-color: #ef4444 !important; }
html.dark .bg-red-600 { background-color: #dc2626 !important; }
html.dark .bg-yellow-500 { background-color: #eab308 !important; }
html.dark .bg-yellow-600 { background-color: #ca8a04 !important; }
html.dark .bg-indigo-500 { background-color: #6366f1 !important; }
html.dark .bg-indigo-600 { background-color: #4f46e5 !important; }

/* Text colors - brighter versions for dark mode */
html.dark .text-red-600,
html.dark .text-red-700,
html.dark .text-red-800 { color: #fca5a5; }
html.dark .text-yellow-600,
html.dark .text-yellow-700,
html.dark .text-yellow-800 { color: #fde047; }
html.dark .text-green-600,
html.dark .text-green-700,
html.dark .text-green-800 { color: #86efac; }
html.dark .text-amber-600,
html.dark .text-amber-700,
html.dark .text-amber-800 { color: #fcd34d; }
html.dark .text-cyan-600,
html.dark .text-cyan-700,
html.dark .text-cyan-800 { color: #67e8f9; }
html.dark .text-sky-600,
html.dark .text-sky-700,
html.dark .text-sky-800 { color: #7dd3fc; }
html.dark .text-indigo-600 { color: #a5b4fc; }
html.dark .text-purple-600 { color: #d8b4fe; }
html.dark .text-indigo-700,
html.dark .text-indigo-800,
html.dark .text-indigo-900,
html.dark .text-purple-700,
html.dark .text-purple-800,
html.dark .text-purple-900 { color: white; }
html.dark .text-blue-600,
html.dark .text-blue-700,
html.dark .text-blue-800 { color: #93c5fd; }
html.dark .text-emerald-600,
html.dark .text-emerald-800 { color: #6ee7b7; }
html.dark .text-gray-400 { color: #6b7280; }

/* Gradients - darker versions for dark mode */
html.dark .from-indigo-50,
html.dark .bg-gradient-to-br.from-indigo-50 {
  background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15)) !important;
}

html.dark .from-indigo-100,
html.dark .bg-gradient-to-br.from-indigo-100 {
  background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.35), rgba(168, 85, 247, 0.35)) !important;
}

html.dark .from-purple-100,
html.dark .bg-gradient-to-br.from-purple-100 {
  background: linear-gradient(to bottom right, rgba(168, 85, 247, 0.35), rgba(99, 102, 241, 0.35)) !important;
}

html.dark .ring-purple-200 {
  --tw-ring-color: rgba(168, 85, 247, 0.4) !important;
}

html.dark .ring-indigo-200,
html.dark .ring-indigo-300 {
  --tw-ring-color: rgba(99, 102, 241, 0.4) !important;
}

html.dark .bg-gradient-to-r.from-green-50 {
  background: linear-gradient(to right, rgba(34, 197, 94, 0.15), rgba(99, 102, 241, 0.15)) !important;
}

html.dark .bg-gradient-to-r.from-purple-50 {
  background: linear-gradient(to right, rgba(168, 85, 247, 0.15), rgba(99, 102, 241, 0.15)) !important;
}

html.dark .border-purple-100 {
  border-color: rgba(168, 85, 247, 0.3) !important;
}

html.dark .bg-gradient-to-r.from-teal-50 {
  background: linear-gradient(to right, rgba(20, 184, 166, 0.15), rgba(6, 182, 212, 0.15)) !important;
}

html.dark .border-teal-100 {
  border-color: rgba(20, 184, 166, 0.3) !important;
}

html.dark .from-gray-50,
html.dark .bg-gradient-to-r.from-gray-50 {
  background: #1a2332 !important;
}

html.dark .to-gray-100 {
  background: #1a2332 !important;
}

/* Company avatars/initials - exclude gradient text elements */
html.dark [class*="from-white"]:not(.text-transparent):not(.bg-clip-text),
html.dark [class*="to-white"]:not(.text-transparent):not(.bg-clip-text) {
  background: #1f2937 !important;
}

html.dark .ring-white {
  --tw-ring-color: #3b4a5a !important;
}

html.dark .ring-indigo-100 {
  --tw-ring-color: rgba(99, 102, 241, 0.3) !important;
}

/* Progress bars background */
html.dark .bg-gray-200 {
  background-color: #223649;
}

/* Border colors for badges and cards */
html.dark .border-indigo-200,
html.dark .border-sky-200,
html.dark .border-green-200 {
  border-color: #3b4a5a;
}

/* Theme toggle icon visibility */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }

html.dark .theme-icon-sun { display: block; }
html.dark .theme-icon-moon { display: none; }

/* ============================================
   BRAND COLOR SYSTEM
   ============================================
   Primary Brand Color: Indigo

   Usage in Tailwind:
   - Buttons: bg-indigo-600 hover:bg-indigo-700
   - Links: text-indigo-600 hover:text-indigo-700
   - Borders: border-indigo-500
   - Focus rings: focus:ring-indigo-500
   - Backgrounds (light): bg-indigo-50 bg-indigo-100

   Secondary Accent: Purple (for gradients)
   - Gradients: from-indigo-600 to-purple-600

   If you need to change the brand color in the future,
   use find-and-replace:
   - Find: indigo-
   - Replace: [new-color]-

   ============================================ */

/* Toast notification animations */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-down {
  animation: fadeInDown 0.3s ease-out;
}

/* ============================================
   PLAYFUL CHAT ANIMATIONS
   ============================================ */

/* Message slide up animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-slide-up {
  animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Subtle pulse for AI avatar */
@keyframes pulseSubtle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.05);
  }
}

.animate-pulse-subtle {
  animation: pulseSubtle 3s ease-in-out infinite;
}

/* Mobile-native full screen support with safe areas */
@supports (height: 100dvh) {
  .h-screen {
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
  }
}

/* iOS safe area support */
@supports (padding: env(safe-area-inset-bottom)) {
  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .safe-top {
    padding-top: env(safe-area-inset-top);
  }
}

/* Touch-friendly tap targets for mobile */
@media (max-width: 640px) {
  button,
  input[type="submit"],
  a {
    min-height: 44px; /* iOS recommended tap target size */
  }
}

/* Subtle noise texture for modern cards */
.texture-noise {
  background-image:
    linear-gradient(rgba(67, 56, 202, 0.05), rgba(67, 56, 202, 0.05)),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.3'/%3E%3C/svg%3E");
  background-color: rgb(30, 27, 75); /* indigo-950 */
}

/* Dropdown functionality with CSS only */
#tools-dropdown:checked ~ .dropdown-menu,
#user-dropdown:checked ~ .dropdown-menu {
  display: block;
}

#tools-dropdown:checked ~ label .dropdown-arrow,
#user-dropdown:checked ~ label .dropdown-arrow {
  transform: rotate(180deg);
}

/* ============================================
   MARKDOWN CONTENT TEXT WRAPPING
   ============================================
   Ensures all markdown content wraps properly
   within message bubbles without overflowing
   ============================================ */

/* Base text wrapping for all prose content */
.prose {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

/* Ensure paragraphs, headings, and lists wrap */
.prose p,
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6,
.prose li,
.prose blockquote {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Handle code blocks and pre elements */
.prose pre,
.prose code {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Inline code should break */
.prose :not(pre) > code {
  word-break: break-all;
}

/* Tables should be scrollable on overflow */
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Links should break on long URLs */
.prose a {
  overflow-wrap: break-word;
  word-break: break-all;
}

/* ============================================
   ONBOARDING HIGHLIGHT ANIMATION
   ============================================
   Used to draw attention to elements during
   the onboarding process
   ============================================ */

/* Onboarding tooltip with bouncing arrow */
.onboarding-tooltip {
  position: relative;
}

.onboarding-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
  animation: tooltip-bounce 1s ease-in-out infinite;
  z-index: 50;
}

.onboarding-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: #7c3aed;
  margin-bottom: -8px;
  animation: tooltip-bounce 1s ease-in-out infinite;
  z-index: 50;
}

@keyframes tooltip-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-8px); }
}

/* ============================================
   CUSTOM SCROLLBAR STYLES
   ============================================ */

/* Custom scrollbar for textareas - Light mode */
textarea::-webkit-scrollbar {
  width: 6px;
}

textarea::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

textarea::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

textarea::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Firefox scrollbar - Light mode */
textarea {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

/* Custom resize handle */
textarea::-webkit-resizer {
  background: linear-gradient(135deg, transparent 50%, #d1d5db 50%, #d1d5db 60%, transparent 60%, transparent 70%, #d1d5db 70%, #d1d5db 80%, transparent 80%);
  border-radius: 0 0 8px 0;
}

/* Dark mode scrollbar for WebKit browsers (Chrome, Safari, Edge) */
html.dark textarea::-webkit-scrollbar,
html.dark .custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html.dark textarea::-webkit-scrollbar-track,
html.dark .custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

html.dark textarea::-webkit-scrollbar-thumb,
html.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #4b5e75;
  border-radius: 3px;
}

html.dark textarea::-webkit-scrollbar-thumb:hover,
html.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #6366f1;
}

/* Dark mode resize handle */
html.dark textarea::-webkit-resizer {
  background: linear-gradient(135deg, transparent 50%, #4b5e75 50%, #4b5e75 60%, transparent 60%, transparent 70%, #4b5e75 70%, #4b5e75 80%, transparent 80%);
}

/* Firefox scrollbar - Dark mode */
html.dark textarea,
html.dark .custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #4b5e75 transparent;
}

/* ============================================
   LANDING PAGE CHAT DEMO ANIMATIONS
   ============================================ */

/* Typing indicator - 3 bouncing dots */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: #818cf8;
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px);
  }
}

/* Chat message fade-in animation */
.chat-message-enter {
  animation: chatMessageEnter 0.3s ease-out forwards;
}

@keyframes chatMessageEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}