/* Text Summarizer Tool Styles */

/* Quick Action Buttons */
.quick-action-btn {
    @apply bg-white border border-gray-200 rounded-lg px-4 py-3 min-w-[4.5rem] h-14 
           hover:border-blue-300 hover:shadow-md transition-all duration-200 
           cursor-pointer text-center flex flex-col items-center justify-center
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.quick-action-btn:hover {
    @apply bg-blue-50 border-blue-300 transform scale-105;
}

.quick-action-btn.active {
    @apply bg-blue-600 text-white border-blue-600;
}

.quick-action-btn div {
    @apply leading-tight;
}

/* Responsive quick action buttons */
@media (max-width: 640px) {
    .quick-action-btn {
        @apply min-w-[4rem] h-12;
    }

    .quick-action-btn div {
        @apply text-xs;
    }
}

@media (max-width: 480px) {
    .quick-action-btn {
        @apply min-w-[3.5rem] h-10 px-2;
    }
}

/* Toggle Switch */
.toggle-checkbox:checked + .toggle-bg {
    @apply bg-blue-600;
}

.toggle-checkbox:checked + .toggle-bg::after {
    @apply translate-x-5;
}

.toggle-bg {
    @apply relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 transition-colors duration-200 ease-in-out;
}

.toggle-bg::after {
    @apply inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ease-in-out translate-x-1;
    content: "";
}

/* Keyword Badges */
.keyword-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium 
           bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200 
           transition-colors duration-200;
}

.keyword-badge.high-score {
    @apply bg-green-100 text-green-800 border-green-200;
}

.keyword-badge.medium-score {
    @apply bg-yellow-100 text-yellow-800 border-yellow-200;
}

.keyword-badge.low-score {
    @apply bg-gray-100 text-gray-800 border-gray-200;
}

.keyword-score {
    @apply ml-2 text-xs opacity-75;
}

/* Keyword List Style */
.keyword-list-item {
    @apply flex justify-between items-center py-2 px-3 rounded-lg
           hover:bg-gray-50 transition-colors duration-200;
}

.keyword-word {
    @apply font-medium text-gray-900;
}

.keyword-stats {
    @apply text-xs text-gray-500 space-x-2;
}

/* Word Cloud Container */
.word-cloud {
    @apply relative min-h-48 bg-gray-50 rounded-lg border border-gray-200 
           flex items-center justify-center overflow-hidden;
}

.word-cloud-word {
    @apply absolute cursor-pointer transition-all duration-300 hover:scale-110
           font-medium text-blue-600 hover:text-blue-800;
}

/* Export Buttons */
.export-btn {
    @apply flex items-center space-x-2 px-4 py-2 bg-gray-100 text-gray-700 
           rounded-lg hover:bg-gray-200 transition-colors duration-200 
           font-medium text-sm border border-gray-200 hover:border-gray-300;
}

.export-btn:hover {
    @apply transform scale-105;
}

.export-btn svg {
    @apply w-4 h-4;
}

/* Analysis Cards */
.analysis-card {
    @apply bg-white rounded-lg border border-gray-200 p-4 space-y-3;
}

.analysis-metric {
    @apply flex justify-between items-center py-2;
}

.analysis-label {
    @apply text-sm font-medium text-gray-700;
}

.analysis-value {
    @apply text-sm text-gray-900 font-semibold;
}

.analysis-description {
    @apply text-xs text-gray-500 mt-1;
}

/* Progress Indicators */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2 overflow-hidden;
}

.progress-fill {
    @apply h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full 
           transition-all duration-500 ease-out;
}

/* Readability Score */
.readability-score {
    @apply text-center py-4;
}

.readability-score-circle {
    @apply w-20 h-20 mx-auto rounded-full border-4 flex items-center justify-center 
           text-xl font-bold relative overflow-hidden;
}

.readability-score-circle.excellent {
    @apply border-green-500 text-green-700 bg-green-50;
}

.readability-score-circle.good {
    @apply border-blue-500 text-blue-700 bg-blue-50;
}

.readability-score-circle.average {
    @apply border-yellow-500 text-yellow-700 bg-yellow-50;
}

.readability-score-circle.poor {
    @apply border-red-500 text-red-700 bg-red-50;
}

/* Batch Processing */
.batch-result-item {
    @apply border border-gray-200 rounded-lg p-4 space-y-3 bg-gray-50;
}

.batch-result-item.success {
    @apply border-green-200 bg-green-50;
}

.batch-result-item.error {
    @apply border-red-200 bg-red-50;
}

.batch-index {
    @apply inline-flex items-center justify-center w-6 h-6 rounded-full 
           bg-blue-600 text-white text-xs font-bold;
}

/* Statistics Dashboard */
.stat-item {
    @apply text-center p-4 bg-gray-50 rounded-lg border border-gray-200;
}

.stat-value {
    @apply text-2xl font-bold text-gray-900;
}

.stat-label {
    @apply text-sm text-gray-600 mt-1;
}

.stat-change {
    @apply text-xs mt-1;
}

.stat-change.positive {
    @apply text-green-600;
}

.stat-change.negative {
    @apply text-red-600;
}

/* Tooltip */
.tooltip {
    @apply absolute z-50 px-3 py-2 text-sm bg-gray-900 text-white rounded-lg 
           shadow-lg pointer-events-none opacity-0 transition-opacity duration-200;
}

.tooltip.show {
    @apply opacity-100;
}

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

/* Loading States */
.loading-shimmer {
    @apply animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 
           bg-[length:200%_100%] rounded;
}

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

.loading-shimmer {
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Content Insights */
.insight-item {
    @apply flex items-start space-x-3 p-3 rounded-lg hover:bg-gray-50 
           transition-colors duration-200;
}

.insight-icon {
    @apply w-8 h-8 rounded-full flex items-center justify-center text-white text-sm;
}

.insight-icon.positive {
    @apply bg-green-500;
}

.insight-icon.negative {
    @apply bg-red-500;
}

.insight-icon.neutral {
    @apply bg-blue-500;
}

.insight-content {
    @apply flex-1;
}

.insight-title {
    @apply font-medium text-gray-900 text-sm;
}

.insight-description {
    @apply text-xs text-gray-600 mt-1;
}

/* Topic Tags */
.topic-tag {
    @apply inline-flex items-center px-2 py-1 rounded-md text-xs font-medium
           bg-purple-100 text-purple-800 border border-purple-200;
}

/* Sentiment Indicator */
.sentiment-indicator {
    @apply flex items-center space-x-2;
}

.sentiment-icon {
    @apply w-5 h-5;
}

.sentiment-positive {
    @apply text-green-600;
}

.sentiment-negative {
    @apply text-red-600;
}

.sentiment-neutral {
    @apply text-gray-600;
}

/* Complexity Meter */
.complexity-meter {
    @apply relative h-3 bg-gray-200 rounded-full overflow-hidden;
}

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

.complexity-fill.simple {
    @apply bg-green-500 w-1/4;
}

.complexity-fill.moderate {
    @apply bg-yellow-500 w-2/4;
}

.complexity-fill.complex {
    @apply bg-orange-500 w-3/4;
}

.complexity-fill.very-complex {
    @apply bg-red-500 w-full;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .quick-action-btn {
        @apply text-xs;
    }

    .analysis-metric {
        @apply flex-col items-start space-y-1;
    }

    .stat-item {
        @apply p-3;
    }

    .stat-value {
        @apply text-xl;
    }
}

/* Print Styles */
@media print {
    .quick-action-btn,
    .export-btn,
    button {
        @apply hidden;
    }

    .bg-gradient-to-br,
    .bg-gradient-to-r {
        @apply bg-white;
    }

    .shadow-sm,
    .shadow-lg {
        @apply shadow-none border border-gray-300;
    }
}

/* Dark Mode Support (if needed in future) */
@media (prefers-color-scheme: dark) {
    .analysis-card {
        @apply bg-gray-800 border-gray-700;
    }

    .analysis-label {
        @apply text-gray-300;
    }

    .analysis-value {
        @apply text-gray-100;
    }
}

/* Animation for results appearing */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.2s ease-out;
}