/*
 * Tailwind CSS Configuration
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Theme Configuration - Tailwind CSS v4 */

@theme {
  /* Redefine secondary colors to use Royal Blue instead of Cyan */
  --color-secondary-50: 239 246 255; /* Very Light Blue */
  --color-secondary-100: 219 234 254; /* Light Blue */
  --color-secondary-200: 191 219 254; /* Lighter Blue */
  --color-secondary-300: 147 197 253; /* Light Royal Blue */
  --color-secondary-400: 100 149 237; /* Cornflower Blue */
  --color-secondary-500: 65 105 225; /* Royal Blue (main) */
  --color-secondary-600: 65 105 225; /* Royal Blue */
  --color-secondary-700: 50 85 180; /* Dark Royal Blue */
  --color-secondary-800: 40 68 144; /* Darker Blue */
  --color-secondary-900: 30 58 138; /* Very Dark Blue */
  --color-secondary-950: 20 38 92; /* Extra Dark Blue */
}

@layer base {
  :root {
    /* Light Theme - Default (basado en la imagen) */
    --color-primary: 65 105 225; /* Royal Blue */
    --color-primary-light: 100 149 237; /* Cornflower Blue */
    --color-primary-dark: 30 58 138; /* Dark Royal Blue */
    
    --color-secondary: 65 105 225; /* Royal Blue (override cyan) */
    --color-secondary-light: 100 149 237; /* Cornflower Blue */
    --color-secondary-dark: 30 58 138; /* Dark Royal Blue */
    
    --color-accent: 168 85 247; /* Purple-500 */
    
    --color-background: 249 250 251; /* Gray-50 */
    --color-surface: 255 255 255; /* White - completamente opaco */
    --color-surface-elevated: 255 255 255; /* White */
    
    --color-border: 229 231 235; /* Gray-200 */
    --color-border-light: 243 244 246; /* Gray-100 */
    
    --color-text-primary: 17 24 39; /* Gray-900 */
    --color-text-secondary: 75 85 99; /* Gray-600 */
    --color-text-tertiary: 156 163 175; /* Gray-400 */
    
    --color-success: 34 197 94; /* Green-500 */
    --color-warning: 251 146 60; /* Orange-400 */
    --color-error: 239 68 68; /* Red-500 */
    
    /* Shadows for light theme */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  }

  [data-theme="dark"] {
    /* Dark Theme - Current design */
    --color-primary: 37 99 235; /* Blue-600 */
    --color-primary-light: 59 130 246; /* Blue-500 */
    --color-primary-dark: 29 78 216; /* Blue-700 */
    
    --color-secondary: 37 99 235; /* Blue-600 (same as primary) */
    --color-secondary-light: 59 130 246; /* Blue-500 */
    --color-secondary-dark: 29 78 216; /* Blue-700 */
    
    --color-accent: 168 85 247; /* Purple */
    
    --color-background: 15 23 42; /* Slate-900 */
    --color-surface: 20 27 45; /* Slate-900 más oscuro - completamente opaco */
    --color-surface-elevated: 30 41 59; /* Slate-800 */
    
    --color-border: 51 65 85; /* Slate-700 */
    --color-border-light: 71 85 105; /* Slate-600 */
    
    --color-text-primary: 248 250 252; /* Slate-50 */
    --color-text-secondary: 203 213 225; /* Slate-300 */
    --color-text-tertiary: 148 163 184; /* Slate-400 */
    
    --color-success: 34 197 94;
    --color-warning: 251 146 60;
    --color-error: 239 68 68;
    
    /* Shadows for dark theme */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  }

  /* Apply theme colors */
  body {
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-text-primary));
    transition: background-color 0.3s ease, color 0.3s ease;
  }
}

/* Custom Tailwind utilities using theme variables */
@layer utilities {
  .bg-theme-bg {
    background-color: rgb(var(--color-background));
  }
  
  .bg-theme-surface {
    background-color: rgb(var(--color-surface));
  }
  
  .bg-theme-elevated {
    background-color: rgb(var(--color-surface-elevated));
  }
  
  .text-theme-primary {
    color: rgb(var(--color-text-primary));
  }
  
  .text-theme-secondary {
    color: rgb(var(--color-text-secondary));
  }
  
  .text-theme-tertiary {
    color: rgb(var(--color-text-tertiary));
  }
  
  .border-theme {
    border-color: rgb(var(--color-border));
  }
  
  .border-theme-light {
    border-color: rgb(var(--color-border-light));
  }
  
  .border-theme-border {
    border-color: rgb(var(--color-border));
  }
  
  .shadow-theme-card {
    box-shadow: var(--shadow-card);
  }
  
  .shadow-theme-sm {
    box-shadow: var(--shadow-sm);
  }
  
  .shadow-theme-md {
    box-shadow: var(--shadow-md);
  }
  
  .shadow-theme-lg {
    box-shadow: var(--shadow-lg);
  }
  
  /* Primary colors using theme variables */
  .bg-primary {
    background-color: rgb(var(--color-primary));
  }
  
  .bg-primary-light {
    background-color: rgb(var(--color-primary-light));
  }
  
  .bg-primary-dark {
    background-color: rgb(var(--color-primary-dark));
  }
  
  .text-primary {
    color: rgb(var(--color-primary));
  }
  
  .text-primary-light {
    color: rgb(var(--color-primary-light));
  }
  
  .text-primary-dark {
    color: rgb(var(--color-primary-dark));
  }
  
  .border-primary {
    border-color: rgb(var(--color-primary));
  }
  
  .ring-primary {
    --tw-ring-color: rgb(var(--color-primary));
  }
  
  .focus\:ring-primary:focus {
    --tw-ring-color: rgb(var(--color-primary));
  }
  
  .focus\:border-primary:focus {
    border-color: rgb(var(--color-primary));
  }
  
  .hover\:text-primary:hover {
    color: rgb(var(--color-primary));
  }
}

/* Smooth transitions for theme switching */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
}

/* Prevent transition on page load */
.no-transition * {
  transition: none !important;
}

/* Date separator styles for chat messages */
.date-separator {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
  position: relative;
}

.date-separator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(156, 163, 175, 0.3);
  z-index: 1;
}

.date-separator-badge {
  background: var(--theme-bg);
  border: 1px solid rgba(156, 163, 175, 0.2);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--theme-tertiary);
  position: relative;
  z-index: 2;
  backdrop-filter: blur(4px);
}

/* Search highlight styles for in-conversation search */
mark.search-highlight {
  background-color: #fef08a;
  color: #000;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-weight: 500;
}

.dark mark.search-highlight {
  background-color: #ca8a04;
  color: #fff;
}

/* Enhanced conversation selection styles */
.conversation-item.selected {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
  border-left: 4px solid #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.conversation-item:not(.selected) .conversation-text {
  font-weight: 300;
  opacity: 0.8;
}

.conversation-item.selected .conversation-text {
  font-weight: 600;
  opacity: 1;
}

/* Mobile improvements - minimal */
@media (max-width: 1024px) {
  /* Fix container height on mobile */
  [data-mobile-height="true"] {
    height: auto !important;
    min-height: 100vh;
  }
  
  /* Prevent zoom on input focus */
  input[type="text"], 
  textarea {
    font-size: 16px !important;
  }
  
  /* Enable touch scrolling */
  .overflow-y-auto,
  .overflow-y-scroll {
    -webkit-overflow-scrolling: touch;
  }
}

/* In-conversation search styles */
.search-match {
  background-color: #fef08a !important;
  color: #000 !important;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.search-match.current {
  background-color: #f59e0b !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5);
  animation: search-pulse 1s ease-in-out;
}

@keyframes search-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Dark mode adjustments for search */
.dark .search-match {
  background-color: #ca8a04 !important;
  color: #fff !important;
}

.dark .search-match.current {
  background-color: #f59e0b !important;
  color: #000 !important;
}

/* Notifications Dropdown Styles */
.notification-item {
  transition: all 0.3s ease;
}

.notification-item:hover {
  transform: translateX(-2px);
}

.notification-item .delete-btn {
  transition: opacity 0.2s ease;
}

/* Custom scrollbar for notifications */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.3);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.5);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}