/* Performance and Accessibility Optimizations */

/* Preload critical images */
.preload-images {
  display: none;
}

/* Optimize image rendering */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Critical images styling for immediate load */
.hero img, .logo img, .sympatico-widget img {
  image-rendering: auto;
}

/* Improve widget text readability */
.sympatico-widget {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Enhanced contrast for better readability */
.sympatico-chat .message-content {
  color: #2c3e50 !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid #e1e8ed !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.sympatico-chat .message.user .message-content {
  background: linear-gradient(135deg, #4ECDC4, #44A08D) !important;
  color: white !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Better input visibility */
.chat-input {
  color: #2c3e50 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.chat-input::placeholder {
  color: #7f8c8d !important;
  opacity: 0.8 !important;
}

/* Suggestion chips with better contrast */
.suggestion-chip {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #2c3e50 !important;
  border: 2px solid #e1e8ed !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.suggestion-chip:hover {
  background: linear-gradient(135deg, #FF6B6B, #4ECDC4) !important;
  color: white !important;
  border-color: transparent !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Header text improvements */
.chat-header h3 {
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  letter-spacing: 0.02em !important;
}

.chat-header p {
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Fast loading animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message {
  animation: fadeInUp 0.3s ease-out;
}

/* Smooth scrolling for better UX */
.chat-messages {
  scroll-behavior: smooth;
}

/* Loading states */
.image-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Performance: GPU acceleration for animations */
.sympatico-button,
.sympatico-chat,
.message-content,
.suggestion-chip {
  will-change: transform;
  transform: translateZ(0);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .sympatico-chat {
    width: calc(100vw - 40px) !important;
    height: calc(100vh - 120px) !important;
    max-width: 350px !important;
    max-height: 500px !important;
  }
  
  .message-content {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  
  .chat-input {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .sympatico-chat .message-content {
    border: 2px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
  }
  
  .sympatico-chat .message.user .message-content {
    background: #000 !important;
    color: #fff !important;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .sympatico-chat {
    background: #1a1a1a !important;
    border: 2px solid #333 !important;
  }
  
  .chat-messages {
    background: #2d2d2d !important;
  }
  
  .sympatico-chat .message-content {
    background: #3a3a3a !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
  }
  
  .chat-input {
    background: #3a3a3a !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
  }
}