/*
 * 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.
 */

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