/* NLP Content Analyzer - Custom Styles */

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

::-webkit-scrollbar-track {
    background: #1e293b;
}

::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

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

.slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Tab System */
.tab-btn {
    @apply px-6 py-3 text-sm font-medium text-slate-400 hover:text-white border-b-2 border-transparent transition-all duration-200;
}

.tab-btn.active {
    @apply text-white border-indigo-500;
}

.tab-content {
    @apply fade-in;
}

/* Prompt Management Styles */
.prompt-tab-btn {
    @apply px-4 py-2 text-sm font-medium text-slate-400 hover:text-white border-b-2 border-transparent transition-all duration-200;
}

.prompt-tab-btn.active {
    @apply text-white border-indigo-500;
}

.prompt-tab-content {
    @apply fade-in;
}

/* Code Editor Styling */
textarea[id*="-prompt"] {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', 'Courier New', monospace;
    line-height: 1.4;
    tab-size: 2;
}

textarea[id*="-prompt"]:focus {
    @apply ring-2 ring-indigo-500/50 border-indigo-500;
}

/* Variable highlighting */
.variable-highlight {
    @apply bg-yellow-500/20 text-yellow-300 px-1 rounded;
}

/* Entity Tags */
.entity-tag {
    @apply inline-block bg-gradient-to-r from-indigo-500/20 to-purple-500/20 border border-indigo-500/30 text-indigo-300 px-3 py-1 rounded-full text-sm font-medium mr-2 mb-2;
}

.entity-tag.person {
    @apply from-green-500/20 to-emerald-500/20 border-green-500/30 text-green-300;
}

.entity-tag.place {
    @apply from-blue-500/20 to-cyan-500/20 border-blue-500/30 text-blue-300;
}

.entity-tag.game {
    @apply from-purple-500/20 to-pink-500/20 border-purple-500/30 text-purple-300;
}

.entity-tag.metric {
    @apply from-yellow-500/20 to-orange-500/20 border-yellow-500/30 text-yellow-300;
}

.entity-tag.missing {
    @apply from-red-500/20 to-pink-500/20 border-red-500/30 text-red-300;
}

/* Score Cards */
.score-card {
    @apply bg-slate-900/50 rounded-lg p-4 text-center transition-all duration-200 hover:bg-slate-800/50;
}

.score-card:hover {
    transform: translateY(-2px);
}

/* Progress Bars */
.progress-bar {
    @apply w-full bg-slate-700 rounded-full h-2 overflow-hidden;
}

.progress-fill {
    @apply h-full transition-all duration-500 ease-out;
}

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

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

.progress-fill.low {
    @apply bg-gradient-to-r from-red-500 to-pink-500;
}

/* Recommendation Cards */
.recommendation-card {
    @apply bg-slate-900/50 border border-slate-700/50 rounded-lg p-4 hover:border-slate-600/50 transition-all duration-200;
}

.recommendation-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1);
}

.recommendation-high {
    @apply border-red-500/30 bg-red-500/5;
}

.recommendation-medium {
    @apply border-yellow-500/30 bg-yellow-500/5;
}

.recommendation-low {
    @apply border-green-500/30 bg-green-500/5;
}

/* Code Blocks */
pre {
    @apply bg-slate-900 rounded-lg p-4 overflow-x-auto text-sm;
}

pre code {
    @apply text-slate-300;
}

.language-json .token.property {
    @apply text-blue-400;
}

.language-json .token.string {
    @apply text-green-400;
}

.language-json .token.number {
    @apply text-yellow-400;
}

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

.loading-dots {
    @apply inline-flex space-x-1;
}

.loading-dots span {
    @apply w-2 h-2 bg-indigo-500 rounded-full animate-bounce;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.1s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.2s;
}

/* Interactive Elements */
.interactive-card {
    @apply transition-all duration-200 cursor-pointer hover:scale-105;
}

.interactive-card:hover {
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.2);
}

/* Status Indicators */
.status-indicator {
    @apply w-3 h-3 rounded-full inline-block mr-2;
}

.status-indicator.online {
    @apply bg-green-500;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.status-indicator.offline {
    @apply bg-red-500;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.status-indicator.connecting {
    @apply bg-yellow-500 animate-pulse;
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
}

/* Entity Relationship Map */
.entity-node {
    @apply inline-block bg-gradient-to-br from-indigo-500 to-purple-600 text-white px-4 py-2 rounded-lg shadow-lg m-2 text-sm font-medium;
    position: relative;
}

.entity-connection {
    @apply absolute border-t-2 border-slate-500 opacity-50;
    top: 50%;
    left: 100%;
    width: 30px;
}

/* Tooltips */
.tooltip {
    @apply absolute bg-slate-800 text-white text-xs rounded py-1 px-2 z-10 opacity-0 transition-opacity duration-200;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
}

.tooltip::after {
    content: '';
    @apply absolute border-4 border-transparent border-t-slate-800;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

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

/* Responsive Adjustments */
@media (max-width: 768px) {
    .tab-btn {
        @apply px-4 py-2 text-xs;
    }
    
    .entity-tag {
        @apply text-xs px-2 py-1;
    }
    
    .score-card {
        @apply p-3;
    }
    
    .recommendation-card {
        @apply p-3;
    }
}

/* Dark Theme Enhancements */
.dark-glow {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.1);
}

.text-glow {
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}

/* Chart Container */
.chart-container {
    position: relative;
    height: 200px;
    width: 100%;
}

#score-chart {
    max-height: 200px !important;
}

/* Copy Button Animation */
.copy-success {
    @apply bg-green-500 !important;
}

.copy-success::before {
    content: '✓ Copied!';
}

/* Modal Animations */
.modal-enter {
    animation: modalEnter 0.3s ease-out;
}

@keyframes modalEnter {
    from { 
        opacity: 0; 
        transform: scale(0.9) translateY(-20px);
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0);
    }
}

/* Focus States */
input:focus, 
textarea:focus, 
select:focus {
    @apply outline-none ring-2 ring-indigo-500/50 border-indigo-500;
}

/* Custom Checkbox */
input[type="checkbox"] {
    @apply w-4 h-4 text-indigo-600 bg-slate-700 border-slate-600 rounded focus:ring-indigo-500 focus:ring-2;
}

/* Gradient Text */
.gradient-text {
    @apply bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent;
}

/* Success States */
.success-glow {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
    @apply border-green-500/50;
}

.error-glow {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
    @apply border-red-500/50;
}

/* Content Comparison */
.content-diff {
    @apply font-mono text-sm leading-relaxed;
}

.diff-added {
    @apply bg-green-500/10 text-green-300 px-1 rounded;
}

.diff-removed {
    @apply bg-red-500/10 text-red-300 px-1 rounded line-through;
}

.diff-modified {
    @apply bg-yellow-500/10 text-yellow-300 px-1 rounded;
}

/* Performance Optimizations */
.will-change-transform {
    will-change: transform;
}

.gpu-accelerate {
    transform: translate3d(0, 0, 0);
}