/**
 * TruthLens Main CSS - Enhanced Professional Layout
 * Date: October 28, 2025 (DROPDOWN ALIGNMENT FIX)
 * Version: 4.1.0 - UNIFIED NAVIGATION SYSTEM ADDED
 * 
 * LATEST CHANGE (October 28, 2025):
 * - FIXED: Service dropdown content alignment and spacing issues
 * - FIXED: Score badge positioning to prevent overlap
 * - FIXED: Proper padding for all dropdown content sections
 * - PRESERVED: All existing styles (DO NO HARM ✓)
 * 
 * PREVIOUS CHANGES (October 24, 2025):
 * - ADDED: Unified navigation header system for all pages
 * - ADDED: Fixed navigation bar with gradient background
 * - ADDED: Active page highlighting in navigation
 * - ADDED: Mobile-responsive hamburger menu
 * - ADDED: "Coming Soon" badge for Debate Arena
 * - ADDED: Smooth transitions and hover effects
 * - PRESERVED: All existing styles (DO NO HARM ✓)
 * 
 * PREVIOUS CHANGES (October 12, 2025):
 * - ADDED: Complete CSS for source credibility comparison bar chart
 * - ADDED: .source-comparison-section, .source-ranking-chart, .source-bar styles
 * - ADDED: Animated bar fills with color coding (excellent/good/moderate/low)
 * - ADDED: Score explanation box styling
 * 
 * All other styles remain unchanged from v4.0.0
 */

/* ===== BASE RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f8fafc;
    color: #1e293b;
    line-height: 1.6;
}

/* ===== HEADER STYLES ===== */
.header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 1.5rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: white;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.logo-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-link:hover {
    color: white;
}

.cta-button {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.cta-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* ===== MAIN CONTAINER ===== */
.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* ===== ANALYSIS SECTION - REDUCED PADDING ===== */
.analysis-section {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

/* ===== NEW: COMPACT HERO SECTION ===== */
.section-header-compact {
    text-align: center;
    margin-bottom: 1.5rem;
}

.main-title-compact {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(10deg); }
}

.subtitle-compact {
    font-size: 1rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto 1rem;
}

/* ===== NEW: CAPABILITIES SHOWCASE ===== */
.capabilities-showcase {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 12px;
}

.capability-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: white;
    border-radius: 20px;
    border: 2px solid #e5e7eb;
    font-weight: 600;
    color: #475569;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    cursor: default;
}

.capability-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    border-color: #6366f1;
}

.capability-badge i {
    color: #6366f1;
    font-size: 1rem;
}

/* ===== MODE SELECTOR ===== */
.mode-selector {
    display: flex;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 0.5rem;
    margin-bottom: 1.5rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.mode-tab {
    flex: 1;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #64748b;
}

.mode-tab.active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
    transform: scale(1.02);
}

.mode-tab:hover:not(.active) {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
}

.mode-tab i {
    font-size: 1.1rem;
}

.mode-content {
    display: none;
}

.mode-content.active {
    display: block;
}

/* ===== NEW: COMPACT MODE DESCRIPTION ===== */
.mode-description-compact {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-radius: 8px;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.mode-description-compact p {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.mode-description-compact i {
    color: #6366f1;
    font-size: 1rem;
}

/* ===== INPUT FORM ===== */
.input-form {
    max-width: 700px;
    margin: 0 auto;
}

.input-group {
    margin-bottom: 1.5rem;
    position: relative;
}

.input-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #334155;
    font-size: 0.9rem;
}

.input-label i {
    margin-right: 0.5rem;
    color: #6366f1;
}

.input-field {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s;
    background: #fafafa;
}

.input-field:focus {
    outline: none;
    border-color: #6366f1;
    background: white;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.textarea-field {
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
}

.transcript-textarea {
    min-height: 150px;
    font-family: 'Inter', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Content type indicators */
.content-type-indicator {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: #6366f1;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s;
}

.content-type-indicator.show {
    opacity: 1;
}

/* ===== BUTTONS ===== */
.button-container {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.analyze-button {
    flex: 1;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.analyze-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.analyze-button:active {
    transform: translateY(0);
}

.analyze-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.reset-button {
    padding: 1rem 1.5rem;
    background: #f1f5f9;
    color: #475569;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.reset-button:hover {
    background: #e2e8f0;
    transform: translateY(-2px);
}

/* ===== EXTRACTION BLOCKED MESSAGE ===== */
.extraction-blocked-message {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    display: none;
}

.extraction-blocked-message.show {
    display: block;
    animation: slideDown 0.3s ease-out;
}

.blocked-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.blocked-icon {
    width: 40px;
    height: 40px;
    background: #f59e0b;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.blocked-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #92400e;
    margin: 0;
}

.blocked-message {
    color: #78350f;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.blocked-action {
    background: white;
    border: 2px dashed #f59e0b;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.blocked-action-title {
    font-weight: 600;
    color: #92400e;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blocked-action-text {
    color: #78350f;
    font-size: 0.9rem;
}

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

.textarea-field.highlight {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.2);
    }
}

.youtube-helper {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.05) 0%, rgba(255, 0, 0, 0.02) 100%);
    border: 1px solid rgba(255, 0, 0, 0.2);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #dc2626;
}

/* ===== PROGRESS CONTAINER - COMPACT & ALWAYS VISIBLE ===== */
.progress-container {
    display: none;
    margin: 1.5rem auto;
    max-width: 700px;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.progress-container.show {
    display: block !important;
}

.progress-header {
    text-align: center;
    margin-bottom: 1rem;
}

.progress-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.progress-subtitle {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
}

.progress-percentage {
    font-size: 1.75rem;
    font-weight: 700;
    color: #6366f1;
    margin: 0.75rem 0;
    text-align: center;
}

.progress-bar-container {
    background: #f1f5f9;
    height: 12px;
    border-radius: 8px;
    overflow: hidden;
    margin: 1rem 0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    border-radius: 8px;
    width: 0%;
    transition: width 0.3s ease;
}

.progress-steps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.progress-step.active {
    opacity: 1;
}

.step-icon {
    width: 32px;
    height: 32px;
    background: #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    color: #6b7280;
    transition: all 0.3s ease;
}

.progress-step.active .step-icon {
    background: #6366f1;
    color: white;
    transform: scale(1.1);
}

.progress-step.completed .step-icon {
    background: #10b981;
    color: white;
}

.step-text {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
}

.progress-step.active .step-text {
    color: #1e293b;
}

/* ===== NEW: WHAT WE ANALYZE SECTION ===== */
.what-we-analyze {
    margin: 2rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 16px;
    border: 2px solid #e5e7eb;
}

.analyze-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.analyze-title i {
    color: #6366f1;
    font-size: 1.5rem;
}

.analyze-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.analyze-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.analyze-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: #6366f1;
}

.analyze-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.analyze-icon.source {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.analyze-icon.bias {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}

.analyze-icon.facts {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.analyze-icon.author {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.analyze-icon.transparency {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
}

.analyze-icon.manipulation {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.analyze-card h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.analyze-card p {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ===== NEW: DATA SOURCES SECTION ===== */
.data-sources {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    border: 2px dashed #e5e7eb;
}

.sources-label {
    display: block;
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.source-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.source-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
    transition: all 0.3s ease;
}

.source-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

/* ===== RESULTS SECTION ===== */
.results-section {
    display: none;
    margin-top: 2rem;
}

.results-section.show {
    display: block;
}

.results-header {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}

.results-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
}

.analysis-mode-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.analysis-mode-badge.news {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.analysis-mode-badge.transcript {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

/* ===== SERVICE DROPDOWN STYLES ===== */
#serviceAnalysisContainer {
    margin-top: 2rem;
}

.service-dropdown {
    margin-bottom: 1rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    background: white;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.service-dropdown.active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.service-header {
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    background: #fafafa;
}

.service-header:hover {
    background: #f3f4f6;
}

.service-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f2937;
}

.service-title i {
    font-size: 1.25rem;
    width: 28px;
    text-align: center;
}

.service-toggle {
    color: #6b7280;
    transition: transform 0.3s;
}

.service-dropdown.active .service-toggle i {
    transform: rotate(180deg);
}

/* Service specific colors */
.sourceCredibilityDropdown .service-title i { color: #6366f1; }
.biasDetectorDropdown .service-title i { color: #f59e0b; }
.factCheckerDropdown .service-title i { color: #3b82f6; }
.transparencyAnalyzerDropdown .service-title i { color: #8b5cf6; }
.manipulationDetectorDropdown .service-title i { color: #ef4444; }
.contentAnalyzerDropdown .service-title i { color: #ec4899; }
.authorDropdown .service-title i { color: #06b6d4; }

/* ===== SERVICE CONTENT ===== */
.service-content {
    background: white;
    border-top: 1px solid #e5e7eb;
    display: none;
}

.service-dropdown.active .service-content {
    display: block;
}

.service-analysis-card {
    padding: 1.5rem;
    background: #fafafa;
}

/* ===== ENHANCED SOURCE CREDIBILITY STYLES ===== */
.source-credibility-enhanced {
    padding: 1rem;
}

.source-metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.source-metric-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
}

.source-metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.source-metric-card.primary {
    border-top: 4px solid #6366f1;
}

.source-metric-card.success {
    border-top: 4px solid #10b981;
}

.source-metric-card.info {
    border-top: 4px solid #3b82f6;
}

.metric-icon-large {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.metric-value-large {
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
    margin-bottom: 0.5rem;
}

/* ============================================================================
   NEW SECTION v4.0.1: SOURCE CREDIBILITY BAR CHART STYLES
   ============================================================================ */

/* Container for the source comparison section */
.source-comparison-section {
    margin: 2rem 0;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Title for the comparison chart */
.comparison-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comparison-title i {
    color: #6366f1;
    font-size: 1.125rem;
}

/* Score explanation box */
.score-explanation {
    background: #f0f9ff;
    border-left: 3px solid #3b82f6;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 6px;
}

.score-explanation p {
    margin: 0;
    font-size: 0.875rem;
    color: #1e40af;
    line-height: 1.5;
}

.score-explanation i {
    margin-right: 0.5rem;
}

/* Container for the bar chart */
.source-ranking-chart {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Individual source bar row */
.source-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.source-bar:hover {
    background: #f1f5f9;
    transform: translateX(4px);
}

/* Highlight current source */
.source-bar.current {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 2px solid #6366f1;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

/* Source name label */
.source-name {
    flex: 0 0 180px;
    font-weight: 600;
    color: #334155;
    font-size: 0.9rem;
}

.source-bar.current .source-name {
    color: #4f46e5;
    font-weight: 700;
}

/* Bar track (background) */
.source-bar-track {
    flex: 1;
    height: 32px;
    background: #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Bar fill (colored bar) */
.source-bar-fill {
    height: 100%;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.75rem;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Animated shimmer effect on bars */
.source-bar-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

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

/* Score label inside the bar */
.score-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Color tiers for different score ranges */
.source-bar-fill.excellent {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.source-bar-fill.good {
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
}

.source-bar-fill.moderate {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.source-bar-fill.low {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

/* Current source bar gets extra emphasis */
.source-bar.current .source-bar-fill {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* Trust Level Meter Section */
.trust-meter-section {
    margin: 2rem 0;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.trust-meter-title {
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 1rem;
    text-align: center;
}

.trust-meter {
    position: relative;
    height: 40px;
    background: linear-gradient(90deg, 
        #ef4444 0%, 
        #f59e0b 25%, 
        #eab308 50%, 
        #84cc16 75%, 
        #10b981 100%
    );
    border-radius: 20px;
    margin-bottom: 0.5rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.trust-indicator {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    background: white;
    border: 4px solid #1e293b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.125rem;
    color: #1e293b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.trust-scale {
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;
    margin-top: 0.5rem;
}

.scale-marker {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 600;
}

/* Source Details Grid */
.source-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.source-detail-item {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.detail-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.detail-content {
    flex: 1;
}

.detail-label {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.detail-value {
    font-size: 0.95rem;
    color: #1e293b;
    font-weight: 600;
}

/* End of Source Credibility Bar Chart Styles */

/* ===== METRICS GRID (GENERAL) ===== */
.service-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.metric-card {
    background: white;
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
    border-left: 3px solid #6366f1;
}

.metric-card.primary { border-left-color: #6366f1; }
.metric-card.success { border-left-color: #10b981; }
.metric-card.warning { border-left-color: #f59e0b; }
.metric-card.danger { border-left-color: #ef4444; }
.metric-card.info { border-left-color: #3b82f6; }
.metric-card.secondary { border-left-color: #06b6d4; }

.metric-icon {
    font-size: 1.5rem;
    color: #6366f1;
    opacity: 0.7;
}

.metric-content {
    flex: 1;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.metric-label {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== ENHANCED TRUST SCORE DISPLAY ===== */
.trust-score-visual {
    display: flex;
    gap: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.score-circle-container {
    flex-shrink: 0;
}

.score-circle-bg {
    width: 180px;
    height: 180px;
    background: conic-gradient(
        from 0deg,
        #10b981 0deg 72deg,
        #3b82f6 72deg 144deg,
        #f59e0b 144deg 216deg,
        #ef4444 216deg 288deg,
        #6b7280 288deg 360deg
    );
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.score-circle-inner {
    width: 164px;
    height: 164px;
    background: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: scoreReveal 0.5s ease-out;
    text-align: center;
    padding: 10px;
}

.trust-score-big {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    margin: 0;
    display: block;
}

.trust-score-big.high { color: #10b981; }
.trust-score-big.medium { color: #3b82f6; }
.trust-score-big.low { color: #ef4444; }

.trust-score-max {
    font-size: 1.125rem;
    color: #6b7280;
    font-weight: 600;
    margin: 0.125rem 0 0.5rem 0;
    display: block;
}

.trust-label-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    max-width: 140px;
    text-align: center;
}

.trust-label-badge.high {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.trust-label-badge.medium {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.trust-label-badge.low {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.score-details-section {
    flex: 1;
}

.score-breakdown-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.score-breakdown-title i {
    color: #6366f1;
}

.calculation-method {
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.calculation-method-title {
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.calculation-method-text {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.6;
}

.service-contributions {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.contributions-title {
    font-weight: 600;
    color: #334155;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.contribution-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.contribution-label {
    flex: 0 0 140px;
    font-size: 0.85rem;
    color: #475569;
    font-weight: 500;
}

.contribution-bar-container {
    flex: 1;
    height: 24px;
    background: #f1f5f9;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.contribution-bar {
    height: 100%;
    border-radius: 12px;
    transition: width 0.6s ease;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
}

.contribution-score {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
}

.contribution-weight {
    flex: 0 0 40px;
    text-align: right;
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 600;
}

.contribution-source { background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%); }
.contribution-bias { background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%); }
.contribution-author { background: linear-gradient(90deg, #06b6d4 0%, #0891b2 100%); }
.contribution-facts { background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%); }
.contribution-transparency { background: linear-gradient(90deg, #8b5cf6 0%, #a855f7 100%); }
.contribution-manipulation { background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); }
.contribution-content { background: linear-gradient(90deg, #ec4899 0%, #db2777 100%); }

.article-info-section {
    margin-top: 2rem;
    padding: 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-label {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value {
    font-size: 1rem;
    color: #1e293b;
    font-weight: 500;
}

.findings-summary {
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.02) 100%);
    border-left: 4px solid #6366f1;
    border-radius: 8px;
}

.findings-title {
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.findings-text {
    color: #475569;
    line-height: 1.7;
    font-size: 0.95rem;
}

/* ===== ANALYSIS DETAILS ===== */
.analysis-details {
    margin-top: 1.5rem;
}

.analysis-block {
    background: white;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border-left: 3px solid #6366f1;
}

.analysis-block h4 {
    color: #1f2937;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.analysis-block h4 i {
    color: #6366f1;
    font-size: 0.875rem;
}

.analysis-block p {
    color: #4b5563;
    line-height: 1.6;
    font-size: 0.9rem;
    margin: 0;
}

/* ===== ERROR MESSAGE ===== */
.error-message {
    position: fixed;
    top: 2rem;
    right: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    max-width: 400px;
    display: none;
}

.error-message.active {
    display: block;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.error-content {
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.error-icon {
    width: 40px;
    height: 40px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.error-text {
    flex: 1;
    color: #1e293b;
    line-height: 1.6;
}

.error-close {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s;
}

.error-close:hover {
    color: #1e293b;
}

/* ===== LOADING OVERLAY ===== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-overlay.active {
    display: flex;
}

.loading-content {
    text-align: center;
    color: white;
}

.loading-spinner {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
}

.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.spinner-ring:nth-child(2) {
    animation-delay: 0.15s;
    opacity: 0.7;
}

.spinner-ring:nth-child(3) {
    animation-delay: 0.3s;
    opacity: 0.5;
}

.spinner-ring:nth-child(4) {
    animation-delay: 0.45s;
    opacity: 0.3;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.loading-subtitle {
    font-size: 1rem;
    opacity: 0.9;
}

/* ===== ANIMATIONS ===== */
@keyframes scoreReveal {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===== UTILITY CLASSES ===== */
.no-data {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
    font-style: italic;
}

.source-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    background: #f1f5f9;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #475569;
    margin-left: 0.5rem;
}

.source-type-badge.youtube {
    background: rgba(255, 0, 0, 0.1);
    color: #dc2626;
}

.source-type-badge.news {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .main-container {
        padding: 1rem;
    }
    
    .analysis-section {
        padding: 1.5rem;
    }
    
    .main-title-compact {
        font-size: 1.5rem;
    }
    
    .subtitle-compact {
        font-size: 0.9rem;
    }
    
    .nav-links {
        display: none;
    }
    
    .capabilities-showcase {
        gap: 0.5rem;
    }
    
    .capability-badge {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }
    
    .analyze-grid {
        grid-template-columns: 1fr;
    }
    
    .service-metrics-grid,
    .source-metrics-row {
        grid-template-columns: 1fr;
    }
    
    .progress-steps {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .trust-score-visual {
        flex-direction: column;
        gap: 2rem;
    }
    
    .score-circle-container {
        margin: 0 auto;
    }
    
    .contribution-item {
        flex-wrap: wrap;
    }
    
    .contribution-label {
        flex: 0 0 100%;
        margin-bottom: 0.25rem;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .progress-container {
        padding: 1.25rem;
    }
    
    .error-message {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
    
    .data-sources {
        padding: 1rem;
    }
    
    .source-badges {
        gap: 0.5rem;
    }
    
    .source-badge {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
    
    /* Responsive bar chart */
    .source-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .source-name {
        flex: 0 0 auto;
        margin-bottom: 0.5rem;
    }
    
    .source-details-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .capabilities-showcase {
        flex-direction: column;
    }
    
    .capability-badge {
        width: 100%;
        justify-content: center;
    }
    
    .mode-selector {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .step-text {
        font-size: 0.65rem;
    }
}
/* ============================================================================
   TRANSPARENCY ANALYZER v3.0.0 STYLES - ADD TO END OF main.css
   Date: October 12, 2025
   
   ADD THESE STYLES TO THE BOTTOM OF YOUR main.css FILE
   ============================================================================ */

/* Transparency Enhanced v3 Container */
.transparency-enhanced-v3 {
    padding: 1rem;
}

/* Hero Section with Score */
.trans-hero-v3 {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    color: white;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}

.trans-score-display-v3 {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.trans-score-circle-v3 {
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.trans-score-number-v3 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    margin: 0;
}

.trans-score-label-v3 {
    font-size: 1.125rem;
    font-weight: 600;
    opacity: 0.9;
}

.trans-score-text-v3 {
    flex: 1;
    min-width: 250px;
}

.trans-score-text-v3 h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: white;
}

.trans-score-text-v3 p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    opacity: 0.95;
}

/* Section Styling */
.trans-section-v3 {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
}

.trans-section-v3.meaning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-left: 4px solid #f59e0b;
}

.trans-section-header-v3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.trans-section-header-v3 i {
    font-size: 1.25rem;
    color: #8b5cf6;
}

.trans-section-header-v3 h4 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
}

.trans-section-content-v3 {
    color: #475569;
    line-height: 1.7;
}

/* Quick Stats Grid */
.trans-stats-grid-v3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.trans-stat-card-v3 {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.3s ease;
    border-top: 4px solid #cbd5e1;
}

.trans-stat-card-v3:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.trans-stat-card-v3.sources {
    border-top-color: #3b82f6;
}

.trans-stat-card-v3.quotes {
    border-top-color: #10b981;
}

.trans-stat-card-v3.verifiable {
    border-top-color: #8b5cf6;
}

.trans-stat-card-v3.links {
    border-top-color: #f59e0b;
}

.trans-stat-icon-v3 {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.75rem;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.trans-stat-card-v3.sources .trans-stat-icon-v3 {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.trans-stat-card-v3.quotes .trans-stat-icon-v3 {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.trans-stat-card-v3.verifiable .trans-stat-icon-v3 {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.trans-stat-card-v3.links .trans-stat-icon-v3 {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.trans-stat-value-v3 {
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.trans-stat-label-v3 {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.trans-stat-detail-v3 {
    font-size: 0.75rem;
    color: #8b5cf6;
    font-weight: 600;
    margin-top: 0.25rem;
}

/* Findings Container */
#trans-findings-container-v3 {
    margin-top: 1rem;
}

/* Education Section */
.trans-education-v3 {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px;
    padding: 2rem;
    margin-top: 2rem;
    border: 2px solid #3b82f6;
}

.trans-edu-header-v3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.trans-edu-header-v3 i {
    font-size: 1.5rem;
    color: #3b82f6;
}

.trans-edu-header-v3 h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e40af;
}

.trans-edu-grid-v3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.trans-edu-item-v3 {
    display: flex;
    align-items: start;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.trans-edu-item-v3:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.trans-edu-item-v3 > i {
    font-size: 1.75rem;
    color: #3b82f6;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.trans-edu-item-v3 strong {
    display: block;
    color: #1e40af;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.trans-edu-item-v3 p {
    margin: 0;
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Responsive Design for Transparency v3 */
@media (max-width: 768px) {
    .trans-hero-v3 {
        padding: 1.5rem;
    }
    
    .trans-score-display-v3 {
        flex-direction: column;
        text-align: center;
    }
    
    .trans-score-circle-v3 {
        width: 120px;
        height: 120px;
    }
    
    .trans-score-number-v3 {
        font-size: 2.75rem;
    }
    
    .trans-score-text-v3 {
        min-width: 0;
    }
    
    .trans-score-text-v3 h3 {
        font-size: 1.5rem;
    }
    
    .trans-stats-grid-v3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .trans-edu-grid-v3 {
        grid-template-columns: 1fr;
    }
    
    .trans-section-v3 {
        padding: 1.25rem;
    }
}

@media (max-width: 480px) {
    .trans-stats-grid-v3 {
        grid-template-columns: 1fr;
    }
}

/* End of Transparency v3.0.0 Styles */
/**
 * TruthLens v4.5.0 - PDF Button CSS Additions
 * Date: October 14, 2025
 * 
 * INSTRUCTIONS:
 * Add these styles to the END of your static/css/main.css file
 * OR include them in a <style> tag in index.html (already done in v4.5.0 index.html)
 * 
 * These styles are for the PDF download button that appears in the results header
 */

/* ===== PDF DOWNLOAD BUTTON STYLES ===== */

/* Main PDF button styling - matches v4.3.0 purple gradient theme */
.pdf-download-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    margin-left: 16px;
}

/* Hover effect - lifts button and enhances shadow */
.pdf-download-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

/* Active/click effect - returns to normal position */
.pdf-download-button:active {
    transform: translateY(0);
}

/* Disabled state - reduced opacity and no interaction */
.pdf-download-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Icon styling within button */
.pdf-download-button i {
    font-size: 16px;
}

/* Results header layout adjustment to accommodate button */
.results-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    margin-bottom: 2rem;
}

/* Ensure title and badge work with button */
.results-title {
    flex: 0 0 auto;
}

.analysis-mode-badge {
    flex: 0 0 auto;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet and below - stack button below title */
@media (max-width: 768px) {
    .pdf-download-button {
        margin-left: 0;
        margin-top: 12px;
        width: 100%;
        justify-content: center;
    }

    .results-header {
        flex-direction: column;
        align-items: center;
    }
}

/* Mobile - ensure button is easily tappable */
@media (max-width: 480px) {
    .pdf-download-button {
        padding: 14px 24px;
        font-size: 16px;
    }
}

/* ===== LOADING STATE (optional enhancement) ===== */

/* Add this class via JavaScript when generating PDF */
.pdf-download-button.generating {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

.pdf-download-button.generating i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== SUCCESS FLASH (optional enhancement) ===== */

/* Add this class briefly after successful PDF generation */
.pdf-download-button.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.pdf-download-button.success i::before {
    content: "\f058"; /* FontAwesome check-circle */
}

/* ===== PRINT STYLES ===== */

/* Hide PDF button when printing the page itself */
@media print {
    .pdf-download-button {
        display: none;
    }
}
/* Enhanced Trust Score Display - FIXED SPACING */
.trust-score-visual {
    display: flex;
    gap: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.score-circle-inner {
    width: 164px;
    height: 164px;
    background: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: scoreReveal 0.5s ease-out;
    text-align: center;
    padding: 10px;
}

/* FIXED: Score display with proper spacing */
.trust-score-big {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    margin: 0;
    display: inline-block;
    position: relative;
}

.trust-score-max {
    font-size: 1.125rem;
    color: #6b7280;
    font-weight: 600;
    margin: 0.125rem 0 0.5rem 0;
    display: inline-block;
    position: relative;
    left: 5px; /* Slight offset to prevent overlap */
}

/* Alternative inline display */
.score-display-inline {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px; /* Small gap between score and /100 */
}

.score-number {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--primary-color);
}

.score-divider {
    font-size: 1.125rem;
    color: #6b7280;
    font-weight: 600;
    margin-left: 4px; /* Add space after score number */
}
/**
 * ADD THIS CSS TO static/css/main.css
 * INSERT AT THE END OF THE FILE (after line 2402)
 * 
 * These styles create the fixed progress bar that stays at the top of the viewport
 * Version: 4.1.0 - ENHANCED FIXED PROGRESS BAR
 * Date: October 22, 2025
 */

/* ===== LOADING OVERLAY BACKDROP ===== */
 * TruthLens Unified Navigation System
 * Version: 1.0.0
 * Date: October 24, 2025
 * 
 * CHANGES:
 * - ADDED: Professional navigation header for all pages
 * - ADDED: Active page highlighting
 * - ADDED: Mobile responsive hamburger menu
 * - ADDED: Smooth transitions and hover effects
 * - ADDED: "Coming Soon" badge styling
 * 
 * This CSS provides unified navigation across:
 * - News Analysis (index.html)
 * - Transcript Analysis (transcript.html)
 * - Debate Arena (future)
 */

/* ===== NAVIGATION HEADER ===== */
.main-navigation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 0;
}

.nav-container-unified {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

/* Logo */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    transition: transform 0.3s ease;
}

.nav-logo:hover {
    transform: scale(1.05);
}

.nav-logo i {
    font-size: 1.75rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    transform: translateY(-2px);
}

.nav-link.active {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nav-link i {
    font-size: 1rem;
}

/* CTA Button - "Upgrade to Pro" */
.nav-item.nav-cta {
    margin-left: 0.5rem;
}

.nav-link-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-link-cta:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.nav-link-cta i {
    color: #fbbf24;
    font-size: 1rem;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 1024px) {
    .nav-link {
        padding: 0.625rem 0.75rem;
        font-size: 0.85rem;
    }
    
    .nav-link i {
        font-size: 0.9rem;
    }
    
    .nav-link-cta {
        padding: 0.625rem 1rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .nav-container-unified {
        padding: 0 1rem;
        height: 60px;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .nav-menu {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        flex-direction: column;
        gap: 0;
        padding: 1rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }

    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-item {
        width: 100%;
    }
    
    .nav-item.nav-cta {
        margin-left: 0;
        margin-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        padding-top: 0.5rem;
    }

    .nav-link {
        width: 100%;
        padding: 1rem;
        justify-content: flex-start;
        border-radius: 8px;
        font-size: 1rem;
    }
    
    .nav-link-cta {
        width: 100%;
        padding: 1rem;
        justify-content: center;
        font-size: 1rem;
    }

    .nav-logo {
        font-size: 1.25rem;
    }

    .nav-logo i {
        font-size: 1.5rem;
    }
}

/* Adjust body padding for fixed nav */
body {
    padding-top: 90px;
}

@media (max-width: 768px) {
    body {
        padding-top: 80px;
    }
}
-e 

/* I did no harm and this file is not truncated */
/**
 * CSS Additions for Service Templates v5.1.0
 * Date: October 27, 2025
 * 
 * APPEND these styles to the END of your existing static/css/main.css file
 * These styles support the simplified service templates
 */

/* ============================================================================
   SIMPLIFIED SERVICE TEMPLATE STYLES v5.1.0
   ============================================================================ */

/* Score Display - Large Centered */
.score-display-large {
    text-align: center;
    padding: 2rem 1rem;
    margin-bottom: 2rem;
}

.score-circle {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.score-number {
    font-size: 4rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.score-max {
    font-size: 2rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1;
}

.score-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: #475569;
    text-transform: capitalize;
}

/* Info Box */
.info-box {
    background: white;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    border-left: 4px solid #3b82f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.info-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.info-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
}

/* Analysis Text Box */
.analysis-text-box {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-left: 4px solid #10b981;
}

.analysis-text-box h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.analysis-text-box h4 i {
    color: #10b981;
}

.analysis-text-box p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #475569;
    margin: 0;
}

/* Findings Box */
.findings-box {
    background: #fffbeb;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-left: 4px solid #f59e0b;
}

.findings-box h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.findings-box h4 i {
    color: #f59e0b;
}

.findings-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.findings-box ul li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #fef3c7;
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
}

.findings-box ul li:last-child {
    border-bottom: none;
}

.findings-box ul li:before {
    content: '✓';
    color: #f59e0b;
    font-weight: bold;
    margin-right: 0.75rem;
}

/* Claims List */
.claims-list {
    margin: 2rem 0;
}

.claims-list h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.claims-list h4 i {
    color: #3b82f6;
}

#claims-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.claim-item {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border-radius: 8px;
    border-left: 4px solid #94a3b8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.claim-item:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.claim-item.claim-true {
    border-left-color: #10b981;
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

.claim-item.claim-false {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
}

.claim-item.claim-neutral {
    border-left-color: #94a3b8;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.claim-number {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.claim-content {
    flex: 1;
}

.claim-text {
    font-size: 0.95rem;
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.claim-verdict {
    font-size: 0.875rem;
    color: #475569;
    margin-bottom: 0.5rem;
}

.claim-verdict strong {
    color: #1e293b;
}

.claim-explanation {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.6;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
    margin-top: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .score-number {
        font-size: 3rem;
    }
    
    .score-max {
        font-size: 1.5rem;
    }
    
    .score-label {
        font-size: 1rem;
    }
    
    .claim-item {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .claim-number {
        align-self: flex-start;
    }
}

/**
 * END OF CSS ADDITIONS v5.1.0
 * Copy everything above and paste at the END of your main.css file
 */
/* ============================================================================
   NEW IN v5.3.0 (October 27, 2025): SOURCE CREDIBILITY ENHANCEMENTS
   Trust Level Meter + Professional Comparison Bars
   ============================================================================ */

/* Trust Level Meter Container */
.trust-level-meter {
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 16px;
    border: 2px solid #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.meter-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.meter-title i {
    font-size: 1.25rem;
    color: #3b82f6;
}

/* Meter Bar Container */
.meter-bar-container {
    position: relative;
}

.meter-bar {
    position: relative;
    height: 60px;
    border-radius: 30px;
    overflow: visible;
}

/* Three color zones */
.meter-zones {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.meter-zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
}

.meter-zone::after {
    content: attr(data-label);
    position: absolute;
    bottom: -24px;
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 600;
}

.meter-zone.low {
    background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
}

.meter-zone.medium {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.meter-zone.high {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

/* Meter Indicator (Arrow) */
.meter-indicator {
    position: absolute;
    top: -12px;
    transform: translateX(-50%);
    transition: left 1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

.indicator-line {
    width: 4px;
    height: 84px;
    background: #1e293b;
    margin: 0 auto;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.indicator-arrow {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 16px solid #1e293b;
    margin: -2px auto 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Zone-specific indicator colors */
.meter-indicator.zone-low .indicator-line,
.meter-indicator.zone-low .indicator-arrow {
    background: #ef4444;
    border-top-color: #ef4444;
}

.meter-indicator.zone-medium .indicator-line,
.meter-indicator.zone-medium .indicator-arrow {
    background: #f59e0b;
    border-top-color: #f59e0b;
}

.meter-indicator.zone-high .indicator-line,
.meter-indicator.zone-high .indicator-arrow {
    background: #10b981;
    border-top-color: #10b981;
}

/* Source Comparison Container */
.source-comparison-container {
    margin: 2rem 0;
    padding: 1.5rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.comparison-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.comparison-title i {
    font-size: 1.25rem;
    color: #6366f1;
}

.comparison-subtitle {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

/* Comparison Bars Container */
.comparison-bars {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Individual Bar Item */
.comparison-bar-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.comparison-bar-item:hover {
    background: #f1f5f9;
    transform: translateX(4px);
}

/* Current source highlighting */
.comparison-bar-item.current-source {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 2px solid #6366f1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.comparison-bar-item.current-source:hover {
    transform: translateX(8px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.25);
}

/* Bar Label (Source Name + Badge) */
.bar-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.source-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #334155;
}

.comparison-bar-item.current-source .source-name {
    color: #4f46e5;
    font-weight: 700;
    font-size: 0.95rem;
}

/* "Your Source" Badge */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

/* Bar Container (Track + Fill) */
.bar-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
}

.bar-fill {
    flex: 1;
    height: 32px;
    border-radius: 16px;
    position: relative;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Animated shimmer on bars */
.bar-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: bar-shimmer 2.5s infinite;
    border-radius: 16px;
}

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

/* Bar Score Label */
.bar-score {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1e293b;
    min-width: 32px;
    text-align: right;
}

.comparison-bar-item.current-source .bar-score {
    color: #4f46e5;
    font-size: 0.95rem;
}

/* Comparison Note */
.comparison-note {
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    background: rgba(59, 130, 246, 0.05);
    border-left: 3px solid #3b82f6;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.5;
}

.comparison-note i {
    color: #3b82f6;
    margin-right: 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .trust-level-meter,
    .source-comparison-container {
        padding: 1rem;
    }
    
    .meter-title,
    .comparison-title {
        font-size: 1rem;
    }
    
    .meter-bar {
        height: 50px;
    }
    
    .indicator-line {
        height: 74px;
    }
    
    .comparison-bar-item {
        padding: 0.5rem;
    }
    
    .bar-label {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }
}

/* ============================================================================
   END OF v5.3.0 CSS ADDITIONS
   ============================================================================ */
/**
 * TruthLens CSS Additions v3.5.0
 * Date: October 28, 2025
 * 
 * ADD THESE STYLES TO THE END OF YOUR main.css FILE
 * 
 * CHANGES:
 * ✅ Service dropdowns now have distinct colored borders
 * ✅ Each of the 7 services has its own color theme
 * ✅ Hover effects enhanced
 * ✅ Better visual distinction between services
 */

/* =============================================================================
   v3.5.0 - SERVICE DROPDOWN COLORED BORDERS
   ============================================================================= */

/* Base service card styling with colored borders */
.service-card {
    border-radius: 16px;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 3px solid transparent; /* Base border */
}

.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Source Credibility - Blue */
.service-card[data-service="source_credibility"],
.service-card.source-credibility {
    border-color: #3b82f6;
    border-left-width: 8px;
}

.service-card[data-service="source_credibility"] .service-header,
.service-card.source-credibility .service-header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
    border-bottom: 2px solid #3b82f6;
}

/* Author Analyzer - Purple */
.service-card[data-service="author_analyzer"],
.service-card.author-analyzer {
    border-color: #8b5cf6;
    border-left-width: 8px;
}

.service-card[data-service="author_analyzer"] .service-header,
.service-card.author-analyzer .service-header {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
    border-bottom: 2px solid #8b5cf6;
}

/* Bias Detector - Orange */
.service-card[data-service="bias_detector"],
.service-card.bias-detector {
    border-color: #f59e0b;
    border-left-width: 8px;
}

.service-card[data-service="bias_detector"] .service-header,
.service-card.bias-detector .service-header {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.05) 100%);
    border-bottom: 2px solid #f59e0b;
}

/* Fact Checker - Green */
.service-card[data-service="fact_checker"],
.service-card.fact-checker {
    border-color: #10b981;
    border-left-width: 8px;
}

.service-card[data-service="fact_checker"] .service-header,
.service-card.fact-checker .service-header {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);
    border-bottom: 2px solid #10b981;
}

/* Transparency Analyzer - Cyan */
.service-card[data-service="transparency_analyzer"],
.service-card.transparency-analyzer {
    border-color: #06b6d4;
    border-left-width: 8px;
}

.service-card[data-service="transparency_analyzer"] .service-header,
.service-card.transparency-analyzer .service-header {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(8, 145, 178, 0.05) 100%);
    border-bottom: 2px solid #06b6d4;
}

/* Manipulation Detector - Red */
.service-card[data-service="manipulation_detector"],
.service-card.manipulation-detector {
    border-color: #ef4444;
    border-left-width: 8px;
}

.service-card[data-service="manipulation_detector"] .service-header,
.service-card.manipulation-detector .service-header {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%);
    border-bottom: 2px solid #ef4444;
}

/* Content Analyzer - Pink */
.service-card[data-service="content_analyzer"],
.service-card.content-analyzer {
    border-color: #ec4899;
    border-left-width: 8px;
}

.service-card[data-service="content_analyzer"] .service-header,
.service-card.content-analyzer .service-header {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(219, 39, 119, 0.05) 100%);
    border-bottom: 2px solid #ec4899;
}

/* Service header enhancements */
.service-header {
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.service-header:hover {
    background-opacity: 0.15;
}

.service-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.service-score-badge {
    margin-left: auto;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.875rem;
}

/* Dropdown toggle icon */
.dropdown-icon {
    transition: transform 0.3s ease;
    color: #64748b;
    margin-left: 0.5rem;
}

.service-card.expanded .dropdown-icon {
    transform: rotate(180deg);
}

/* Service content area */
.service-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.service-card.expanded .service-content {
    max-height: 5000px;
    transition: max-height 0.6s ease-in;
}

.service-body {
    padding: 2rem;
    background: #ffffff;
}

/* =============================================================================
   END OF v3.5.0 CSS ADDITIONS
   ============================================================================= */

/**
 * DEPLOYMENT INSTRUCTIONS:
 * 
 * 1. Copy everything above (from the v3.5.0 comment to the END comment)
 * 2. Open your main.css file
 * 3. Scroll to the very bottom
 * 4. Paste these styles at the end
 * 5. Save the file
 * 6. Deploy to GitHub
 * 
 * These styles work with your existing service-templates.js
 * No JavaScript changes needed - just add the CSS!
 */

/* I did no harm and this file is not truncated. */
/**
 * TruthLens Main CSS - DROPDOWN ALIGNMENT FIXES v3.5.2
 * Date: October 28, 2025
 * 
 * ============================================================================
 * SURGICAL FIXES FOR DROPDOWN CONTENT ALIGNMENT ISSUES
 * ============================================================================
 * 
 * ROOT CAUSES IDENTIFIED FROM SCREENSHOT:
 * 1. Score "91/100" overlapping with content below
 * 2. "UNKNOWN" text poorly positioned  
 * 3. Content sections lacking proper spacing/padding
 * 4. Dropdown content not properly separated from header
 * 
 * FIXES APPLIED:
 * ✅ Added proper padding to .service-analysis-card
 * ✅ Fixed score badge positioning to prevent overlap
 * ✅ Added clear spacing between dropdown header and content
 * ✅ Improved vertical rhythm for all content sections
 * ✅ Enhanced "UNKNOWN" and label text positioning
 * 
 * NOTE: These styles are APPENDED to your existing CSS.
 * They override specific problem areas without touching anything else.
 */

/* ============================================================================
   FIX #1: SERVICE DROPDOWN CONTENT SPACING
   Problem: Content inside dropdowns lacks proper padding/spacing
   ============================================================================ */

/* Ensure proper padding in dropdown content area */
.service-analysis-card {
    padding: 2rem 1.5rem !important;
    background: #fafafa;
}

/* Add breathing room between sections inside dropdown */
.service-analysis-card > * + * {
    margin-top: 1.5rem;
}

/* ============================================================================
   FIX #2: SCORE DISPLAY POSITIONING
   Problem: "91/100" score overlapping with content below
   ============================================================================ */

/* Score display at top of dropdown - prevent overlap */
.score-display-large {
    text-align: center;
    padding: 1.5rem 1rem 2rem 1rem !important;
    margin-bottom: 1.5rem !important;
    border-bottom: 2px solid #e5e7eb;
}

/* Ensure score number and max are properly spaced */
.score-circle {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.75rem !important;
}

.score-number {
    font-size: 3.5rem !important;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.score-max {
    font-size: 1.75rem !important;
    font-weight: 600;
    color: #64748b;
    line-height: 1;
    margin-left: 0.25rem;
}

.score-label {
    font-size: 1.125rem !important;
    font-weight: 600;
    color: #475569;
    text-transform: capitalize;
    margin-top: 0.5rem !important;
}

/* ============================================================================
   FIX #3: "UNKNOWN" AND LABEL TEXT POSITIONING
   Problem: "UNKNOWN" text appears oddly positioned
   ============================================================================ */

/* Info boxes (where "UNKNOWN" appears) - proper spacing */
.info-box {
    background: white;
    border-radius: 8px;
    padding: 1.25rem !important;
    margin-bottom: 1.25rem !important;
    border-left: 4px solid #3b82f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Labels (like "POLITICAL LEANING") - clear spacing */
.info-label {
    font-size: 0.75rem;
    font-weight: 700 !important;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem !important;
    display: block;
}

/* Values (like "center" or "UNKNOWN") - proper positioning */
.info-value {
    font-size: 1.125rem !important;
    font-weight: 600;
    color: #1e293b;
    display: block;
    line-height: 1.4;
}

/* ============================================================================
   FIX #4: ANALYSIS SECTIONS SPACING
   Problem: Content sections need better vertical rhythm
   ============================================================================ */

/* Analysis text boxes - consistent spacing */
.analysis-text-box {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1.5rem !important;
    margin-bottom: 1.25rem !important;
    border-left: 4px solid #10b981;
}

.analysis-text-box h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.analysis-text-box h4 i {
    color: #10b981;
}

.analysis-text-box p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #475569;
    margin: 0;
}

/* Findings boxes - proper spacing */
.findings-box {
    background: #fffbeb;
    border-radius: 8px;
    padding: 1.5rem !important;
    margin-bottom: 1.25rem !important;
    border-left: 4px solid #f59e0b;
}

.findings-box h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.findings-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.findings-box ul li {
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid #fef3c7;
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
}

.findings-box ul li:last-child {
    border-bottom: none;
}

/* ============================================================================
   FIX #5: CLAIMS SECTION ALIGNMENT
   Problem: Claims need better spacing and alignment
   ============================================================================ */

/* Claims list container */
.claims-list {
    margin: 2rem 0 !important;
}

.claims-list h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1.5rem !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Individual claim items */
.claim-item {
    display: flex;
    gap: 1rem;
    padding: 1.25rem !important;
    background: white;
    border-radius: 8px;
    border-left: 4px solid #94a3b8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 1rem !important;
    transition: all 0.2s ease;
}

.claim-item:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.claim-number {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.claim-content {
    flex: 1;
}

.claim-text {
    font-size: 0.95rem;
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 0.75rem !important;
    line-height: 1.6;
}

.claim-verdict {
    font-size: 0.875rem;
    color: #475569;
    margin-bottom: 0.5rem !important;
}

.claim-explanation {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.6;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
    margin-top: 0.5rem !important;
}

/* ============================================================================
   FIX #6: RESPONSIVE SPACING ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
    .service-analysis-card {
        padding: 1.5rem 1rem !important;
    }
    
    .score-display-large {
        padding: 1.25rem 1rem 1.5rem 1rem !important;
    }
    
    .score-number {
        font-size: 2.75rem !important;
    }
    
    .score-max {
        font-size: 1.5rem !important;
    }
    
    .info-box,
    .analysis-text-box,
    .findings-box {
        padding: 1.25rem !important;
        margin-bottom: 1rem !important;
    }
    
    .claim-item {
        padding: 1rem !important;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .claim-number {
        align-self: flex-start;
    }
}

/* ============================================================================
   END OF DROPDOWN ALIGNMENT FIXES v3.5.2
   
   DEPLOYMENT CHECKLIST:
   ✅ These styles fix score overlap
   ✅ These styles fix "UNKNOWN" positioning
   ✅ These styles add proper spacing to all dropdown content
   ✅ These styles work with existing HTML/JS
   ✅ No other styles were modified (DO NO HARM ✓)
   
   Simply append this entire section to the END of your main.css file.
   ============================================================================ */

/* I did no harm and this file is not truncated. */
/* ============================================================================
   CRITICAL FIX v3.5.3 (October 28, 2025): TRUST SCORE CIRCLE OVERLAP FIX
   ============================================================================
   
   Problem: Trust score circle (180px) overlaps with text content
   Solution: Make circle smaller and more responsive
   ============================================================================ */

/* Reduce circle size to prevent overlap */
.score-circle-bg {
    width: 140px !important;
    height: 140px !important;
}

.score-circle-inner {
    width: 124px !important;
    height: 124px !important;
}

/* Adjust text sizing inside smaller circle */
.trust-score-big {
    font-size: 2.25rem !important;
}

.trust-score-max {
    font-size: 1rem !important;
}

.trust-label-badge {
    font-size: 0.6rem !important;
    padding: 0.2rem 0.4rem !important;
}

/* Ensure proper spacing in trust score layout */
.trust-score-visual {
    display: flex !important;
    gap: 2rem !important;
    padding: 1.5rem !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* Better responsive behavior */
@media (max-width: 768px) {
    .trust-score-visual {
        flex-direction: column !important;
        gap: 1.5rem !important;
        text-align: center !important;
    }
    
    .score-circle-bg {
        width: 120px !important;
        height: 120px !important;
    }
    
    .score-circle-inner {
        width: 104px !important;
        height: 104px !important;
    }
    
    .trust-score-big {
        font-size: 2rem !important;
    }
}

/* ============================================================================
   END OF TRUST SCORE FIX v3.5.3
   ============================================================================ */

/* I did no harm and this file is not truncated. */

/* ============================================================================
   PROGRESS ANIMATION FIX v3.5.3 (October 28, 2025)
   ============================================================================
   
   Problem: Progress animation showing just percentage on dark screen
   Solution: Ensure all progress elements are visible and styled properly
   ============================================================================ */

/* Make sure progress percentage is always visible and styled */
.progress-percentage,
.progress-percentage-enhanced {
    font-size: 3rem !important;
    font-weight: 800 !important;
    color: #6366f1 !important;
    text-align: center !important;
    margin: 1rem 0 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure loading content container is properly styled */
.loading-content,
.progress-content {
    text-align: center;
    color: white;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    min-width: 400px;
    max-width: 600px;
}

/* Make sure any text in loading is visible */
.loading-content *,
.progress-container-enhanced * {
    color: white !important;
}

/* Progress text/message styling */
.progress-message,
.progress-subtitle,
.loading-subtitle {
    font-size: 1.125rem !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin: 1rem 0 !important;
    line-height: 1.6 !important;
}

/* Fun fact styling if present */
.fun-fact,
.fun-facts-section {
    background: rgba(255, 255, 255, 0.15) !important;
    padding: 1rem !important;
    border-radius: 8px !important;
    margin-top: 1.5rem !important;
    color: white !important;
}

/* Responsive progress display */
@media (max-width: 768px) {
    .loading-content,
    .progress-content {
        min-width: 300px;
        padding: 1.5rem;
    }
    
    .progress-percentage,
    .progress-percentage-enhanced {
        font-size: 2.5rem !important;
    }
}

/* ============================================================================
   END OF PROGRESS ANIMATION FIX v3.5.3
   ============================================================================ */

/* I did no harm and this file is not truncated. */
/* ============================================================================
   APPEND THIS TO THE END OF YOUR EXISTING main.css FILE
   TRUST SCORE CIRCLE OVERLAP FIX v4.1.1
   Date: October 28, 2025
   
   INSTRUCTIONS:
   1. Open your existing static/css/main.css file
   2. Scroll to the VERY BOTTOM
   3. Copy everything below this line and paste it at the end
   4. Save the file
   ============================================================================ */

/* CRITICAL FIX: TRUST SCORE DISPLAY - NO OVERLAP */

.trust-score-visual {
    display: flex !important;
    gap: 2rem !important;
    padding: 2rem !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    border-radius: 16px !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    align-items: center !important;
}

.score-circle-container {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* FIXED: Smaller circle to prevent overlap */
.score-circle-bg {
    width: 130px !important;
    height: 130px !important;
    background: conic-gradient(
        from 0deg,
        #10b981 0deg 72deg,
        #3b82f6 72deg 144deg,
        #f59e0b 144deg 216deg,
        #ef4444 216deg 288deg,
        #6b7280 288deg 360deg
    ) !important;
    border-radius: 50% !important;
    padding: 6px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* FIXED: Smaller inner circle */
.score-circle-inner {
    width: 118px !important;
    height: 118px !important;
    background: white !important;
    border-radius: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    animation: scoreReveal 0.5s ease-out !important;
    text-align: center !important;
    padding: 8px !important;
    gap: 2px !important;
}

/* FIXED: Smaller score number - no overlap */
.trust-score-big {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin: 0 !important;
    display: block !important;
}

.trust-score-big.high { 
    color: #10b981 !important; 
}

.trust-score-big.medium { 
    color: #3b82f6 !important; 
}

.trust-score-big.low { 
    color: #ef4444 !important; 
}

/* FIXED: Smaller max number */
.trust-score-max {
    font-size: 0.9rem !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: block !important;
}

/* FIXED: Smaller badge that fits */
.trust-label-badge {
    padding: 0.2rem 0.4rem !important;
    border-radius: 12px !important;
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
    max-width: 100px !important;
    text-align: center !important;
    margin-top: 2px !important;
}

.trust-label-badge.high {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #059669 !important;
}

.trust-label-badge.medium {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #2563eb !important;
}

.trust-label-badge.low {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #dc2626 !important;
}

/* Score details section */
.score-details-section {
    flex: 1 !important;
    min-width: 0 !important;
}

.score-breakdown-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.score-breakdown-title i {
    color: #6366f1 !important;
}

/* Responsive fixes */
@media (max-width: 968px) {
    .trust-score-visual {
        flex-direction: column !important;
        gap: 1.5rem !important;
        text-align: center !important;
    }
    
    .score-circle-bg {
        width: 120px !important;
        height: 120px !important;
    }
    
    .score-circle-inner {
        width: 108px !important;
        height: 108px !important;
    }
    
    .trust-score-big {
        font-size: 2.25rem !important;
    }
    
    .trust-score-max {
        font-size: 0.85rem !important;
    }
    
    .trust-label-badge {
        font-size: 0.5rem !important;
    }
}

@media (max-width: 480px) {
    .score-circle-bg {
        width: 110px !important;
        height: 110px !important;
    }
    
    .score-circle-inner {
        width: 98px !important;
        height: 98px !important;
    }
    
    .trust-score-big {
        font-size: 2rem !important;
    }
}

/* ============================================================================
   END OF TRUST SCORE FIX v4.1.1 - October 28, 2025
   This fix uses !important to override existing styles
   No need to delete anything - just append this to the bottom
   ============================================================================ */

/* I did no harm and this file is not truncated */
/**
 * TruthLens CSS Additions for Bias Detector v5.8.0
 * Date: October 30, 2025
 * 
 * APPEND THESE STYLES TO THE END OF YOUR static/css/main.css FILE
 * 
 * These styles support the enhanced bias detector display with:
 * - Political spectrum bar (far-left to far-right)
 * - Educational "What is Bias?" section
 * - Multi-dimensional bias breakdown
 * - Loaded language examples
 * - Score explanation
 * 
 * DEPLOYMENT INSTRUCTIONS:
 * 1. Open your existing static/css/main.css file
 * 2. Scroll to the VERY BOTTOM
 * 3. Copy everything below this comment block
 * 4. Paste it at the end of main.css
 * 5. Save the file
 */

/* ============================================================================
   BIAS DETECTOR v5.8.0 ENHANCEMENTS
   Date: October 30, 2025
   ============================================================================ */

/* Bias Detector Enhanced Container */
.bias-detector-enhanced-v2 {
    padding: 1rem;
}

/* Outlet Context Banner */
#bias-outlet-banner {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    border-radius: 12px;
    border-left: 4px solid #6366f1;
}

/* Political Spectrum Container */
#bias-spectrum-container {
    margin: 2rem 0;
    padding: 1.5rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 2px solid #e2e8f0;
}

/* Political Spectrum Bar */
.bias-spectrum-bar {
    height: 48px;
    border-radius: 24px;
    background: linear-gradient(
        90deg, 
        #dc2626 0%, 
        #f97316 20%, 
        #fbbf24 40%, 
        #94a3b8 50%, 
        #60a5fa 60%, 
        #3b82f6 80%, 
        #1e40af 100%
    );
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible;
}

/* Spectrum Indicator (Arrow) */
#bias-spectrum-indicator {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

#bias-spectrum-indicator > div:first-child {
    width: 4px;
    height: 64px;
    background: #1e293b;
    margin: 0 auto;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#bias-spectrum-indicator > div:last-child {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 16px solid #1e293b;
    margin: -2px auto 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Spectrum Labels */
.spectrum-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 0 0.5rem;
}

.spectrum-label-left,
.spectrum-label-center,
.spectrum-label-right {
    text-align: center;
}

.spectrum-label-left {
    text-align: left;
}

.spectrum-label-right {
    text-align: right;
}

/* Educational Section */
.bias-education-section {
    margin: 2rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 16px;
    border: 2px solid #f59e0b;
}

.bias-education-card {
    background: white;
    padding: 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
}

.bias-education-card:last-child {
    margin-bottom: 0;
}

.bias-education-card.political {
    border-left: 4px solid #f59e0b;
}

.bias-education-card.neutral {
    border-left: 4px solid #3b82f6;
}

.bias-education-card.importance {
    border-left: 4px solid #10b981;
}

/* Bias Dimensions Container */
#bias-dimensions-container {
    margin: 2rem 0;
    padding: 1.5rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 2px solid #e2e8f0;
}

#bias-dimensions-content {
    display: grid;
    gap: 1rem;
}

/* Individual Dimension Item */
.bias-dimension-item {
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.bias-dimension-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dimension Bar */
.dimension-bar-container {
    background: #e2e8f0;
    border-radius: 6px;
    height: 10px;
    overflow: hidden;
    margin-top: 0.75rem;
}

.dimension-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
}

/* Loaded Language Container */
#bias-loaded-language-container {
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: 16px;
    border: 2px solid #ef4444;
}

#bias-loaded-phrases-content {
    display: grid;
    gap: 0.75rem;
}

/* Loaded Phrase Item */
.loaded-phrase-item {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid #ef4444;
}

.loaded-phrase-number {
    width: 28px;
    height: 28px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

/* Score Explanation Box */
.bias-score-explanation-box {
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px;
    border-left: 4px solid #3b82f6;
}

#bias-score-explanation {
    font-size: 0.95rem;
    color: #0c4a6e;
    line-height: 1.7;
}

#bias-score-explanation ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

#bias-score-explanation li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #bae6fd;
}

#bias-score-explanation li:last-child {
    border-bottom: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    #bias-spectrum-container {
        padding: 1rem;
    }
    
    .bias-education-section {
        padding: 1.5rem;
    }
    
    #bias-dimensions-container {
        padding: 1rem;
    }
    
    #bias-loaded-language-container {
        padding: 1rem;
    }
    
    .bias-score-explanation-box {
        padding: 1rem;
    }
    
    #bias-spectrum-indicator > div:first-child {
        height: 54px;
    }
}

@media (max-width: 480px) {
    .bias-spectrum-bar {
        height: 40px;
    }
    
    #bias-spectrum-indicator > div:first-child {
        height: 48px;
    }
    
    .spectrum-labels {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .spectrum-label-left,
    .spectrum-label-center,
    .spectrum-label-right {
        text-align: center;
    }
}

/* Animation for spectrum indicator */
@keyframes spectrum-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

#bias-spectrum-indicator {
    animation: spectrum-pulse 2s ease-in-out infinite;
}

/* Dimension Icons */
.dimension-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    margin-right: 0.75rem;
}

.dimension-icon.political {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.dimension-icon.sensationalism {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white;
}

.dimension-icon.corporate {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.dimension-icon.loaded {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.dimension-icon.framing {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    color: white;
}

.dimension-icon.controversial {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    color: white;
}

.dimension-icon.pseudoscience {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
}

/* ============================================================================
   END OF BIAS DETECTOR v5.8.0 ENHANCEMENTS
   ============================================================================ */

/**
 * DEPLOYMENT VERIFICATION:
 * After adding these styles, test by:
 * 1. Analyzing any news article
 * 2. Opening the Bias Detection dropdown
 * 3. Verify you see:
 *    - Political spectrum bar with arrow indicator
 *    - Yellow educational section about bias
 *    - Multi-dimensional breakdown with colored bars
 *    - Loaded language examples (if found)
 *    - Blue score explanation box
 */

/* I did no harm and this file is not truncated. */
/**
 * TruthLens - COLORED BAR RESTORATION CSS
 * Version: 1.0.0 
 * Date: December 29, 2025
 * 
 * CRITICAL FIX: Restores colored gradient bars in Source Credibility comparison chart
 * 
 * PROBLEM IDENTIFIED:
 * - service-templates.js v5.14.0 uses class names: .comparison-bar-fill-current, .comparison-bar-fill, .comparison-bar-container
 * - These classes were MISSING from main.css
 * - Without CSS rules, bars appear as plain gray/transparent
 * 
 * SOLUTION:
 * - Add CSS rules for these specific class names
 * - Apply beautiful color gradients based on score ranges
 * - Maintain "YOU ARE HERE" highlighting for current source
 * 
 * DEPLOYMENT INSTRUCTIONS:
 * 1. Open your static/css/main.css file
 * 2. Scroll to the VERY BOTTOM
 * 3. Copy everything below the "START HERE" line
 * 4. Paste at the end of main.css
 * 5. Save and deploy to GitHub
 * 
 * ============================================================================
 * START HERE - COPY EVERYTHING BELOW THIS LINE
 * ============================================================================
 */

/* ============================================================================
   COMPARISON BAR COLORED GRADIENTS v1.0.0
   Date: December 29, 2025
   
   These styles work with service-templates.js v5.14.0
   They add beautiful colored gradients to comparison bars
   ============================================================================ */

/* Container for each bar (track background) */
.comparison-bar-container {
    width: 100%;
    height: 32px;
    background: #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Bar fill - Current Source (YOU ARE HERE) - Bright Blue Gradient */
.comparison-bar-fill-current {
    height: 100%;
    border-radius: 16px;
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Animated shimmer effect on current source bar */
.comparison-bar-fill-current::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: bar-shimmer-current 2s infinite;
    border-radius: 16px;
}

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

/* Bar fill - Other Sources - Color-coded by score */
.comparison-bar-fill {
    height: 100%;
    border-radius: 16px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Animated shimmer effect on other bars */
.comparison-bar-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: bar-shimmer-other 2.5s infinite;
    border-radius: 16px;
}

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

/* ============================================================================
   COLOR-CODED BARS BY SCORE RANGE
   These styles are applied dynamically by JavaScript based on outlet score
   ============================================================================ */

/* Excellent (90-100): Vibrant Green Gradient */
.comparison-bar-fill[data-score-range="excellent"],
.comparison-bar-fill.excellent {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

/* Very Good (85-89): Emerald Green Gradient */
.comparison-bar-fill[data-score-range="very-good"],
.comparison-bar-fill.very-good {
    background: linear-gradient(90deg, #059669 0%, #047857 100%);
}

/* Good (80-84): Blue Gradient */
.comparison-bar-fill[data-score-range="good"],
.comparison-bar-fill.good {
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
}

/* Above Average (75-79): Light Blue Gradient */
.comparison-bar-fill[data-score-range="above-average"],
.comparison-bar-fill.above-average {
    background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%);
}

/* Average (70-74): Teal Gradient */
.comparison-bar-fill[data-score-range="average"],
.comparison-bar-fill.average {
    background: linear-gradient(90deg, #14b8a6 0%, #0d9488 100%);
}

/* Fair (65-69): Yellow-Orange Gradient */
.comparison-bar-fill[data-score-range="fair"],
.comparison-bar-fill.fair {
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
}

/* Below Average (60-64): Orange Gradient */
.comparison-bar-fill[data-score-range="below-average"],
.comparison-bar-fill.below-average {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

/* Poor (50-59): Orange-Red Gradient */
.comparison-bar-fill[data-score-range="poor"],
.comparison-bar-fill.poor {
    background: linear-gradient(90deg, #f97316 0%, #ea580c 100%);
}

/* Very Poor (Below 50): Red Gradient */
.comparison-bar-fill[data-score-range="very-poor"],
.comparison-bar-fill.very-poor {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

/* ============================================================================
   ADDITIONAL STYLING FOR BAR TEXT AND LABELS
   ============================================================================ */

/* Style for source names in comparison */
.comparison-bar-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #334155;
}

.comparison-bar-name-current {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
}

/* "YOU ARE HERE" badge */
.comparison-bar-badge {
    background: #3b82f6;
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    margin-left: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

/* Source type labels (e.g., "Wire Service") */
.comparison-bar-type {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Score numbers */
.comparison-bar-score {
    font-weight: 600;
    color: #64748b;
    font-size: 0.95rem;
}

.comparison-bar-score-current {
    font-weight: 700;
    color: #1e293b;
    font-size: 1.1rem;
}

/* ============================================================================
   HOVER EFFECTS
   ============================================================================ */

.comparison-bar-item.comparison-bar-current:hover .comparison-bar-fill-current {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
}

.comparison-bar-item:hover .comparison-bar-fill {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
    .comparison-bar-container {
        height: 28px;
    }
    
    .comparison-bar-name,
    .comparison-bar-name-current {
        font-size: 0.875rem;
    }
    
    .comparison-bar-score,
    .comparison-bar-score-current {
        font-size: 0.875rem;
    }
    
    .comparison-bar-badge {
        font-size: 0.65rem;
        padding: 0.1rem 0.4rem;
    }
}

@media (max-width: 480px) {
    .comparison-bar-container {
        height: 24px;
    }
    
    .comparison-bar-badge {
        display: block;
        margin-left: 0;
        margin-top: 0.25rem;
    }
}

/* ============================================================================
   END OF COLORED BAR RESTORATION CSS v1.0.0
   December 29, 2025
   
   VERIFICATION CHECKLIST:
   ✅ Adds CSS for .comparison-bar-fill-current (current source - blue)
   ✅ Adds CSS for .comparison-bar-fill (other sources - color-coded)
   ✅ Adds CSS for .comparison-bar-container (bar track)
   ✅ Provides 9 different color gradients based on score ranges
   ✅ Includes shimmer animations for visual polish
   ✅ Maintains "YOU ARE HERE" special styling
   ✅ Fully responsive design
   ✅ No changes needed to JavaScript
   ✅ No harm to existing CSS (just additions)
   
   Simply append these styles to the END of your static/css/main.css file
   ============================================================================ */

/* I did no harm and this file is not truncated */