/* Mutual Horizon - Modern Dark Theme Styles */

/* Base Styles */
* {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Traffic Light Styles - Modern Glass Morphism */
.traffic-light-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}

.traffic-light-active {
  @apply border-opacity-100 shadow-2xl;
  box-shadow: 0 0 40px rgba(var(--tw-shadow-color), 0.4);
}

.traffic-light-inactive {
  @apply border-slate-600 bg-slate-800/30 border-opacity-50;
}

/* Enhanced Traffic Light States */
.green-active {
  @apply bg-gradient-to-br from-green-400 to-emerald-600 border-green-400 shadow-green-500;
  animation: pulse-glow-green 2s infinite;
}

.yellow-active {
  @apply bg-gradient-to-br from-yellow-400 to-orange-500 border-yellow-400 shadow-yellow-500;
  animation: pulse-glow-yellow 2s infinite;
}

.red-active {
  @apply bg-gradient-to-br from-red-400 to-rose-600 border-red-400 shadow-red-500;
  animation: pulse-glow-red 2s infinite;
}

@keyframes pulse-glow-green {
  0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.4), 0 0 40px rgba(34, 197, 94, 0.2); }
  50% { box-shadow: 0 0 30px rgba(34, 197, 94, 0.6), 0 0 60px rgba(34, 197, 94, 0.3); }
}

@keyframes pulse-glow-yellow {
  0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2); }
  50% { box-shadow: 0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3); }
}

@keyframes pulse-glow-red {
  0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.4), 0 0 40px rgba(239, 68, 68, 0.2); }
  50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.6), 0 0 60px rgba(239, 68, 68, 0.3); }
}

/* Source Cards - Modern Glass Morphism Design */
.source-card {
  @apply bg-slate-800/40 border border-slate-700/50 rounded-xl p-6 
         backdrop-blur-sm hover:border-slate-600/50 
         transition-all duration-300 hover:transform hover:scale-[1.02] 
         hover:shadow-xl group;
}

.source-card:hover {
  background: rgba(30, 41, 59, 0.6);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.1);
}

.reliability-bar {
  @apply w-full h-3 bg-slate-700/50 rounded-full overflow-hidden backdrop-blur-sm;
}

.reliability-fill {
  @apply h-full transition-all duration-500 relative overflow-hidden;
}

.reliability-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.reliability-high {
  @apply bg-gradient-to-r from-emerald-500 to-green-400;
}

.reliability-medium {
  @apply bg-gradient-to-r from-yellow-500 to-orange-400;
}

.reliability-low {
  @apply bg-gradient-to-r from-red-500 to-rose-400;
}

/* Bias Indicators - Modern Gradient Pills */
.bias-indicator {
  @apply inline-flex px-3 py-1.5 text-xs font-semibold rounded-full 
         backdrop-blur-sm border transition-all duration-300 hover:scale-105;
}

.bias-left {
  @apply bg-gradient-to-r from-blue-500/20 to-blue-600/20 
         text-blue-300 border-blue-500/30 hover:border-blue-400/50;
}

.bias-center {
  @apply bg-gradient-to-r from-slate-500/20 to-slate-600/20 
         text-slate-300 border-slate-500/30 hover:border-slate-400/50;
}

.bias-right {
  @apply bg-gradient-to-r from-red-500/20 to-red-600/20 
         text-red-300 border-red-500/30 hover:border-red-400/50;
}

.bias-mixed {
  @apply bg-gradient-to-r from-yellow-500/20 to-orange-500/20 
         text-yellow-300 border-yellow-500/30 hover:border-yellow-400/50;
}

/* Mindset Analysis - Advanced Gradient Animations */
.mindset-scout {
  @apply bg-gradient-to-r from-emerald-400 via-blue-500 to-cyan-400;
  background-size: 200% 200%;
  animation: gradient-flow 3s ease infinite;
}

.mindset-balanced {
  @apply bg-gradient-to-r from-yellow-400 via-orange-500 to-amber-400;
  background-size: 200% 200%;
  animation: gradient-flow 3s ease infinite;
}

.mindset-soldier {
  @apply bg-gradient-to-r from-red-400 via-rose-500 to-pink-400;
  background-size: 200% 200%;
  animation: gradient-flow 3s ease infinite;
}

@keyframes gradient-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Claim Cards - Modern Glass Morphism with Gradient Borders */
.claim-card {
  @apply border-l-4 pl-6 py-4 rounded-r-xl backdrop-blur-sm 
         transition-all duration-300 hover:transform hover:translate-x-2
         relative overflow-hidden;
}

.claim-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.claim-card:hover::before {
  opacity: 1;
}

.claim-verified {
  @apply border-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20;
}

.claim-verified::before {
  background: linear-gradient(45deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.1));
}

.claim-disputed {
  @apply border-red-400 bg-red-500/10 hover:bg-red-500/20;
}

.claim-disputed::before {
  background: linear-gradient(45deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
}

.claim-unverified {
  @apply border-yellow-400 bg-yellow-500/10 hover:bg-yellow-500/20;
}

.claim-unverified::before {
  background: linear-gradient(45deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.1));
}

/* Modern Loading Animations */
.pulse-slow {
  animation: pulse-modern 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-modern {
  0%, 100% { 
    opacity: 0.8; 
    transform: scale(1);
  }
  50% { 
    opacity: 1; 
    transform: scale(1.05);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Interactive Chain Nodes - Enhanced Hover Effects */
.chain-node {
  @apply cursor-pointer transition-all duration-300 hover:scale-105
         hover:shadow-lg hover:shadow-blue-500/25 relative group;
}

/* Removed ::before pseudo-element to eliminate any pulsing/glowing effects */

.chain-node:hover .node-tooltip {
  @apply opacity-100 scale-100;
}

.node-tooltip {
  @apply opacity-0 scale-95 transition-all duration-300 transform-gpu;
}

/* Custom Scrollbar - Dark Theme */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, rgba(59, 130, 246, 0.6), rgba(99, 102, 241, 0.6));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, rgba(59, 130, 246, 0.8), rgba(99, 102, 241, 0.8));
}

/* Glass Morphism Utilities */
.glass {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.glass-strong {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Focus Styles - Modern Accessibility */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:ring-offset-2 focus:ring-offset-slate-900;
}



/* Responsive Design */
@media (max-width: 640px) {
  .traffic-light-container {
    scale: 0.9;
    flex-direction: column;
    gap: 1rem;
  }

  .glass, .glass-strong {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .source-card {
    padding: 1rem;
  }

  .claim-card {
    padding-left: 1rem;
  }

  /* Mobile-friendly collapsible sections */
  .collapsible-section {
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .collapsible-section.expanded {
    max-height: 2000px;
  }
}

/* Enhanced Source Credibility Badges */
.credibility-badge {
  @apply inline-flex items-center px-3 py-1.5 text-xs font-semibold rounded-full
         backdrop-blur-sm border transition-all duration-300 hover:scale-105 gap-1.5;
}

.credibility-very-high {
  @apply bg-gradient-to-r from-emerald-500/30 to-green-500/30
         text-emerald-300 border-emerald-500/40 hover:border-emerald-400/60
         shadow-sm shadow-emerald-500/20;
}

.credibility-high {
  @apply bg-gradient-to-r from-green-500/20 to-emerald-500/20
         text-green-300 border-green-500/30 hover:border-green-400/50
         shadow-sm shadow-green-500/15;
}

.credibility-medium {
  @apply bg-gradient-to-r from-yellow-500/20 to-orange-500/20
         text-yellow-300 border-yellow-500/30 hover:border-yellow-400/50
         shadow-sm shadow-yellow-500/15;
}

.credibility-low {
  @apply bg-gradient-to-r from-orange-500/20 to-red-500/20
         text-orange-300 border-orange-500/30 hover:border-orange-400/50
         shadow-sm shadow-orange-500/15;
}

.credibility-very-low {
  @apply bg-gradient-to-r from-red-500/30 to-rose-500/30
         text-red-300 border-red-500/40 hover:border-red-400/60
         shadow-sm shadow-red-500/20;
}

.credibility-satire {
  @apply bg-gradient-to-r from-purple-500/20 to-pink-500/20
         text-purple-300 border-purple-500/30 hover:border-purple-400/50
         shadow-sm shadow-purple-500/15;
}

/* Interactive Claim Cards */
.claim-card-interactive {
  @apply cursor-pointer select-none;
}

.claim-card-expanded {
  @apply bg-opacity-30;
}

.claim-details {
  @apply mt-4 pt-4 border-t border-slate-600/30;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0;
}

.claim-details.expanded {
  max-height: 500px;
  opacity: 1;
}

/* Enhanced Mindset Visualization */
.mindset-indicator {
  @apply relative w-16 h-16 rounded-full flex items-center justify-center
         transition-all duration-300 cursor-help;
  background: conic-gradient(from 0deg, var(--scout-color) 0deg, var(--scout-color) var(--scout-deg), var(--soldier-color) var(--scout-deg) 360deg);
}

.mindset-tooltip {
  @apply absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2
         bg-slate-800 text-white text-xs rounded-lg px-3 py-2 whitespace-nowrap
         opacity-0 pointer-events-none transition-all duration-200
         border border-slate-600/50 backdrop-blur-sm shadow-xl z-50;
}

.mindset-indicator:hover .mindset-tooltip {
  @apply opacity-100;
}

/* Cross-Reference UI */
.cross-ref-container {
  @apply bg-slate-800/40 border border-slate-700/50 rounded-xl p-6
         backdrop-blur-sm animate-fade-in;
}

.consensus-indicator {
  @apply inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-semibold
         border transition-all duration-300;
}

.consensus-strong {
  @apply bg-emerald-500/20 text-emerald-300 border-emerald-500/40;
}

.consensus-moderate {
  @apply bg-yellow-500/20 text-yellow-300 border-yellow-500/40;
}

.consensus-weak {
  @apply bg-orange-500/20 text-orange-300 border-orange-500/40;
}

.consensus-conflicting {
  @apply bg-red-500/20 text-red-300 border-red-500/40 animate-pulse-soft;
}

.source-agreement {
  @apply inline-flex items-center gap-1;
}

.source-agrees {
  @apply text-emerald-400;
}

.source-disagrees {
  @apply text-red-400;
}

/* Comparison Table */
.comparison-table {
  @apply w-full border-collapse;
}

.comparison-table th {
  @apply bg-slate-700/30 px-4 py-3 text-left text-sm font-semibold text-slate-300
         border-b border-slate-600/30;
}

.comparison-table td {
  @apply px-4 py-3 text-sm text-slate-200 border-b border-slate-700/20;
}

.comparison-table tr:hover {
  @apply bg-slate-700/20;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  @apply md:hidden p-2 rounded-lg bg-slate-800/50 border border-slate-700/50
         hover:bg-slate-700/50 transition-colors;
}

.mobile-menu {
  @apply md:hidden absolute top-full right-0 mt-2 w-48 bg-slate-800 border border-slate-700
         rounded-lg shadow-xl p-2 space-y-1 z-50;
  display: none;
}

.mobile-menu.open {
  display: block;
  animation: slideDown 0.2s ease;
}

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

/* Loading States */
.skeleton {
  @apply bg-slate-700/30 animate-pulse rounded;
}

.skeleton-text {
  @apply h-4 bg-slate-700/30 rounded animate-pulse;
}

.skeleton-circle {
  @apply w-12 h-12 bg-slate-700/30 rounded-full animate-pulse;
}

/* Tooltips */
.tooltip-container {
  @apply relative inline-block;
}

.tooltip {
  @apply absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2
         bg-slate-900 text-slate-200 text-xs rounded-lg px-3 py-2
         opacity-0 pointer-events-none transition-all duration-200
         border border-slate-600 backdrop-blur-sm shadow-xl z-50 whitespace-nowrap;
}

.tooltip-container:hover .tooltip {
  @apply opacity-100;
}

.tooltip::after {
  content: '';
  @apply absolute top-full left-1/2 transform -translate-x-1/2
         border-4 border-transparent border-t-slate-900;
}

/* Responsive Design - Mobile First */
@media (max-width: 640px) {
  .comparison-table {
    font-size: 0.75rem;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 0.5rem 0.75rem;
  }

  .consensus-indicator {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
  }

  .credibility-badge {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .traffic-light-container div {
    @apply border-4 border-white;
  }
  
  .source-card, .claim-card {
    @apply border-2 border-white/50;
  }
  
  .glass, .glass-strong {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.3);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .animate-gradient,
  .animate-float,
  .animate-pulse-soft,
  .gradient-flow,
  .shimmer {
    animation: none !important;
  }
}

/* Performance Optimizations */
.transform-gpu {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.animate-performance {
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Tooltip Styles */
.tooltip-content {
  pointer-events: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.tooltip-content::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 20px;
  width: 12px;
  height: 12px;
  background: rgb(15, 23, 42);
  border-right: 1px solid rgb(51, 65, 85);
  border-bottom: 1px solid rgb(51, 65, 85);
  transform: rotate(45deg);
}