/* Custom CSS for Optus HDD Compliance Copilot */
/* Extends Tailwind CSS with component-specific styles */

/* Smooth transitions for dark mode */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Custom button animations */
.btn-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

/* Voice input animations */
.voice-active {
  background: linear-gradient(45deg, #10B981, #059669);
  animation: voice-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes voice-pulse {
  from {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  to {
    box-shadow: 0 0 0 15px rgba(16, 185, 129, 0);
  }
}

/* Citation chip styles */
.citation-chip {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
  @apply bg-blue-100 text-blue-800 border border-blue-200;
  @apply hover:bg-blue-200 cursor-pointer transition-colors duration-200;
  @apply dark:bg-blue-900 dark:text-blue-200 dark:border-blue-800;
}

.citation-chip:hover {
  @apply bg-blue-200 dark:bg-blue-800;
}

.citation-chip.verified {
  @apply bg-green-100 text-green-800 border-green-200;
  @apply dark:bg-green-900 dark:text-green-200 dark:border-green-800;
}

.citation-chip.needs-pick {
  @apply bg-yellow-100 text-yellow-800 border-yellow-200;
  @apply dark:bg-yellow-900 dark:text-yellow-200 dark:border-yellow-800;
}

.citation-chip.out-of-scope {
  @apply bg-red-100 text-red-800 border-red-200;
  @apply dark:bg-red-900 dark:text-red-200 dark:border-red-800;
}

/* Answer block styles */
.answer-block {
  @apply bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 shadow-sm;
}

.answer-block.verified {
  @apply border-l-4 border-l-green-500;
}

.answer-block.needs-pick {
  @apply border-l-4 border-l-yellow-500;
}

.answer-block.out-of-scope {
  @apply border-l-4 border-l-red-500;
}

/* Category tile hover effects */
.category-tile {
  @apply transform transition-all duration-200 hover:scale-105 hover:shadow-md;
}

/* Custom scrollbar for conversation area */
.conversation-scroll::-webkit-scrollbar {
  width: 6px;
}

.conversation-scroll::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-gray-800;
}

.conversation-scroll::-webkit-scrollbar-thumb {
  @apply bg-gray-300 dark:bg-gray-600 rounded-full;
}

.conversation-scroll::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400 dark:bg-gray-500;
}

/* Loading states */
.loading-dots::after {
  content: '';
  animation: loading-dots 1.5s linear infinite;
}

@keyframes loading-dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
  100% { content: ''; }
}

/* Alert styles */
.alert-success {
  @apply bg-green-50 border border-green-200 text-green-800 rounded-lg p-4;
  @apply dark:bg-green-900 dark:border-green-800 dark:text-green-200;
}

.alert-warning {
  @apply bg-yellow-50 border border-yellow-200 text-yellow-800 rounded-lg p-4;
  @apply dark:bg-yellow-900 dark:border-yellow-800 dark:text-yellow-200;
}

.alert-error {
  @apply bg-red-50 border border-red-200 text-red-800 rounded-lg p-4;
  @apply dark:bg-red-900 dark:border-red-800 dark:text-red-200;
}

.alert-info {
  @apply bg-blue-50 border border-blue-200 text-blue-800 rounded-lg p-4;
  @apply dark:bg-blue-900 dark:border-blue-800 dark:text-blue-200;
}

/* Form enhancements */
.form-input {
  @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md;
  @apply bg-white dark:bg-gray-700 text-gray-900 dark:text-white;
  @apply focus:ring-2 focus:ring-blue-500 focus:border-transparent;
  @apply transition-all duration-200;
}

.form-textarea {
  @apply w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg;
  @apply bg-white dark:bg-gray-700 text-gray-900 dark:text-white;
  @apply focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none;
  @apply transition-all duration-200;
}

/* Button variants */
.btn-primary {
  @apply px-4 py-2 bg-blue-600 text-white rounded-lg font-medium;
  @apply hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  @apply transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-secondary {
  @apply px-4 py-2 bg-gray-600 text-white rounded-lg font-medium;
  @apply hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
  @apply transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-success {
  @apply px-4 py-2 bg-green-600 text-white rounded-lg font-medium;
  @apply hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2;
  @apply transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
}

/* Status indicators */
.status-verified {
  @apply inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800;
  @apply dark:bg-green-900 dark:text-green-200;
}

.status-needs-pick {
  @apply inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-yellow-100 text-yellow-800;
  @apply dark:bg-yellow-900 dark:text-yellow-200;
}

.status-out-of-scope {
  @apply inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800;
  @apply dark:bg-red-900 dark:text-red-200;
}

/* Accessibility enhancements */
.focus-visible {
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .citation-chip {
    @apply border-2;
  }
  
  .btn-primary {
    @apply border-2 border-blue-800;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .answer-block {
    @apply border border-gray-400 mb-4;
    break-inside: avoid;
  }
  
  .citation-chip {
    @apply bg-gray-100 text-gray-800 border border-gray-400;
  }
}

/* Mobile enhancements */
@media (max-width: 768px) {
  .category-tile {
    @apply transform-none hover:scale-100;
  }
  
  .conversation-scroll {
    -webkit-overflow-scrolling: touch;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}