/**
 * IWAC Sentiment Analysis Block Styles
 *
 * Displays AI sentiment analysis from Gemini, ChatGPT, and Mistral
 * with visual cards showing polarity, centrality, and subjectivity.
 *
 * Integrated with IWAC-theme CSS variables for consistent theming.
 */

/* ============================================
   Sentiment-specific CSS Variables
   These extend the theme's system for sentiment-specific needs
   ============================================ */

:root {
    /* Polarity colors - light theme */
    --sentiment-very-positive: hsl(152, 60%, 30%);
    --sentiment-positive: hsl(152, 55%, 45%);
    --sentiment-neutral: var(--muted, hsl(200, 10%, 48%));
    --sentiment-negative: hsl(355, 70%, 60%);
    --sentiment-very-negative: hsl(355, 80%, 45%);
    --sentiment-na: var(--muted, hsl(200, 10%, 48%));

    /* Subjectivity colors - light theme (blue=objective to purple=subjective) */
    --sentiment-very-objective: hsl(210, 70%, 45%);
    --sentiment-objective: hsl(220, 60%, 55%);
    --sentiment-mixed: hsl(250, 45%, 55%);
    --sentiment-subjective: hsl(270, 55%, 52%);
    --sentiment-very-subjective: hsl(285, 60%, 48%);

    /* Centrality accent */
    --sentiment-centrality-filled: var(--info, hsl(210, 75%, 52%));
    --sentiment-centrality-empty: var(--border-light, hsl(35, 10%, 91%));

    /* Chart colors - model specific */
    --sentiment-gemini: hsl(217, 89%, 61%);
    --sentiment-gemini-bg: hsla(217, 89%, 61%, 0.2);
    --sentiment-chatgpt: hsl(162, 82%, 35%);
    --sentiment-chatgpt-bg: hsla(162, 82%, 35%, 0.2);
    --sentiment-mistral: hsl(26, 100%, 50%);
    --sentiment-mistral-bg: hsla(26, 100%, 50%, 0.2);

    /* Chart text - explicit for better readability */
    --sentiment-chart-text: hsl(215, 20%, 25%);
    --sentiment-chart-grid: hsla(var(--ink-hue, 215), var(--ink-sat, 20%), var(--ink-lum, 12%), 0.15);
}

/* Dark theme - system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --sentiment-very-positive: hsl(152, 55%, 45%);
        --sentiment-positive: hsl(152, 50%, 55%);
        --sentiment-neutral: var(--muted, hsl(215, 12%, 65%));
        --sentiment-negative: hsl(355, 75%, 65%);
        --sentiment-very-negative: hsl(355, 80%, 55%);
        --sentiment-na: var(--muted, hsl(215, 12%, 65%));

        /* Subjectivity colors - dark theme */
        --sentiment-very-objective: hsl(210, 75%, 60%);
        --sentiment-objective: hsl(220, 65%, 65%);
        --sentiment-mixed: hsl(250, 55%, 65%);
        --sentiment-subjective: hsl(270, 60%, 65%);
        --sentiment-very-subjective: hsl(285, 65%, 62%);

        --sentiment-centrality-filled: var(--info, hsl(210, 80%, 60%));
        --sentiment-centrality-empty: var(--border, hsl(220, 12%, 22%));

        --sentiment-chart-text: hsl(210, 15%, 90%);
        --sentiment-chart-grid: hsla(var(--ink-hue, 210), var(--ink-sat, 25%), var(--ink-lum, 96%), 0.15);
    }
}

/* Dark theme - manual toggle */
body[data-theme="dark"] {
    --sentiment-very-positive: hsl(152, 55%, 45%);
    --sentiment-positive: hsl(152, 50%, 55%);
    --sentiment-neutral: var(--muted, hsl(215, 12%, 65%));
    --sentiment-negative: hsl(355, 75%, 65%);
    --sentiment-very-negative: hsl(355, 80%, 55%);
    --sentiment-na: var(--muted, hsl(215, 12%, 65%));

    /* Subjectivity colors - dark theme */
    --sentiment-very-objective: hsl(210, 75%, 60%);
    --sentiment-objective: hsl(220, 65%, 65%);
    --sentiment-mixed: hsl(250, 55%, 65%);
    --sentiment-subjective: hsl(270, 60%, 65%);
    --sentiment-very-subjective: hsl(285, 65%, 62%);

    --sentiment-centrality-filled: var(--info, hsl(210, 80%, 60%));
    --sentiment-centrality-empty: var(--border, hsl(220, 12%, 22%));

    --sentiment-chart-text: hsl(210, 15%, 90%);
    --sentiment-chart-grid: hsla(var(--ink-hue, 210), var(--ink-sat, 25%), var(--ink-lum, 96%), 0.15);
}

/* Light theme - manual toggle (override system dark preference) */
body[data-theme="light"] {
    --sentiment-very-positive: hsl(152, 60%, 30%);
    --sentiment-positive: hsl(152, 55%, 45%);
    --sentiment-neutral: var(--muted, hsl(200, 10%, 48%));
    --sentiment-negative: hsl(355, 70%, 60%);
    --sentiment-very-negative: hsl(355, 80%, 45%);
    --sentiment-na: var(--muted, hsl(200, 10%, 48%));

    /* Subjectivity colors - light theme */
    --sentiment-very-objective: hsl(210, 70%, 45%);
    --sentiment-objective: hsl(220, 60%, 55%);
    --sentiment-mixed: hsl(250, 45%, 55%);
    --sentiment-subjective: hsl(270, 55%, 52%);
    --sentiment-very-subjective: hsl(285, 60%, 48%);

    --sentiment-centrality-filled: var(--info, hsl(210, 75%, 52%));
    --sentiment-centrality-empty: var(--border-light, hsl(35, 10%, 91%));

    --sentiment-chart-text: hsl(215, 20%, 25%);
    --sentiment-chart-grid: hsla(var(--ink-hue, 215), var(--ink-sat, 20%), var(--ink-lum, 12%), 0.15);
}

/* ============================================
   Block Container
   ============================================ */

.iwac-sentiment-block {
    font-family: var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    margin: var(--space-8, 2rem) 0;
    padding: var(--space-4, 1rem);
    background: var(--bg-muted, var(--surface-raised, hsl(38, 18%, 97%)));
    border-radius: var(--radius-md, 0.75rem);
    border: 1px solid var(--border-color, var(--border, hsl(35, 12%, 85%)));
    /* Enable container queries */
    container-type: inline-size;
    container-name: sentiment-block;
    /* Prevent overflow */
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.iwac-sentiment-block.compact {
    padding: var(--space-3, 0.75rem);
}

/* ============================================
   Header
   ============================================ */

.sentiment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4, 1rem);
    margin-bottom: var(--space-6, 1.5rem);
    padding-bottom: var(--space-4, 1rem);
    border-bottom: 1px solid var(--border-color, var(--border, hsl(35, 12%, 85%)));
}

.sentiment-title {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    margin: 0;
    font-size: var(--font-size-lg, 1.25rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, var(--ink, hsl(215, 20%, 12%)));
}

.title-icon {
    color: var(--text-secondary, var(--muted, hsl(200, 10%, 48%)));
}

.header-controls {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
}

/* View Toggle */
.view-toggle {
    display: flex;
    background: var(--border-color, var(--border, hsl(35, 12%, 85%)));
    border-radius: var(--radius-sm, 0.375rem);
    padding: 2px;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    background: transparent;
    border: none;
    border-radius: calc(var(--radius-sm, 0.375rem) - 2px);
    cursor: pointer;
    color: var(--text-secondary, var(--muted, hsl(200, 10%, 48%)));
    transition: var(--transition-fast, 150ms ease);
}

.view-toggle-btn:hover {
    color: var(--text-primary, var(--ink, hsl(215, 20%, 12%)));
}

.view-toggle-btn.active {
    background: var(--bg-surface, var(--surface, hsl(40, 20%, 99%)));
    color: var(--text-primary, var(--ink, hsl(215, 20%, 12%)));
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.view-toggle-btn svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   Cards Grid
   ============================================ */

.sentiment-grid {
    display: grid;
    /* Use smaller minimum for better responsiveness */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--space-5, 1.25rem);
}

.compact .sentiment-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--space-4, 1rem);
}

/* Container query for narrow contexts (sidebars) */
@container sentiment-block (max-width: 400px) {
    .sentiment-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4, 1rem);
    }

    .compact .sentiment-grid {
        gap: var(--space-3, 0.75rem);
    }
}

/* ============================================
   Individual Card
   ============================================ */

.sentiment-card {
    background: var(--bg-surface, var(--surface, hsl(40, 20%, 99%)));
    border-radius: var(--radius-md, 0.75rem);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
    overflow: hidden;
    transition: var(--transition-base, 200ms ease);
}

.sentiment-card:hover {
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
    transform: translateY(var(--lift-xs, -2px));
}

.card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    padding-top: 0.875rem;
    background: var(--bg-muted, var(--surface-raised, hsl(38, 18%, 97%)));
    border-left: 4px solid;
}

.compact .card-header {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    padding-top: 0.625rem;
}

.model-logo {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    object-fit: contain;
}

.model-name {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, var(--ink, hsl(215, 20%, 12%)));
}

.compact .model-name {
    font-size: 0.875rem;
}

.card-body {
    padding: var(--space-4, 1rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

.compact .card-body {
    padding: var(--space-3, 0.75rem);
    gap: var(--space-2, 0.5rem);
}

/* ============================================
   Metrics
   ============================================ */

.metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
}

.metric-label {
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-secondary, var(--muted, hsl(200, 10%, 48%)));
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.metric-value {
    font-size: 0.9375rem;
    color: var(--text-primary, var(--ink, hsl(215, 20%, 12%)));
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

/* Polarity Badge */
.polarity-badge {
    display: inline-block;
    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-full, 9999px);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium, 500);
}

/* Polarity Color Classes */
.polarity-very-positive { background: var(--sentiment-very-positive) !important; color: var(--white, #ffffff) !important; }
.polarity-positive { background: var(--sentiment-positive) !important; color: var(--white, #ffffff) !important; }
.polarity-neutral { background: var(--sentiment-neutral) !important; color: var(--white, #ffffff) !important; }
.polarity-negative { background: var(--sentiment-negative) !important; color: var(--white, #ffffff) !important; }
.polarity-very-negative { background: var(--sentiment-very-negative) !important; color: var(--white, #ffffff) !important; }
.polarity-na { background: var(--sentiment-na) !important; color: var(--white, #ffffff) !important; }

/* Subjectivity Badge */
.subjectivity-badge {
    display: inline-block;
    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-full, 9999px);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium, 500);
}

/* Subjectivity Color Classes */
.subjectivity-very-objective { background: var(--sentiment-very-objective) !important; color: var(--white, #ffffff) !important; }
.subjectivity-objective { background: var(--sentiment-objective) !important; color: var(--white, #ffffff) !important; }
.subjectivity-mixed { background: var(--sentiment-mixed) !important; color: var(--white, #ffffff) !important; }
.subjectivity-subjective { background: var(--sentiment-subjective) !important; color: var(--white, #ffffff) !important; }
.subjectivity-very-subjective { background: var(--sentiment-very-subjective) !important; color: var(--white, #ffffff) !important; }

/* Centrality Dots */
.centrality-dots {
    display: inline-flex;
    gap: 0.125rem;
    margin-left: var(--space-2, 0.5rem);
}

.centrality-dots .dot {
    font-size: 0.75rem;
    line-height: 1;
}

.centrality-dots .dot.filled {
    color: var(--sentiment-centrality-filled);
}

.centrality-dots .dot.empty {
    color: var(--sentiment-centrality-empty);
}

/* Subjectivity Bar */
.subjectivity-display {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    width: 100%;
}

.subjectivity-bar {
    flex: 1;
    height: 8px;
    background: var(--border-color, var(--border, hsl(35, 12%, 85%)));
    border-radius: calc(var(--radius-sm, 0.375rem) - 2px);
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sentiment-subjectivity-start), var(--sentiment-subjectivity-end));
    border-radius: calc(var(--radius-sm, 0.375rem) - 2px);
    transition: width 0.3s ease;
}

.score-label {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium, 500);
    color: var(--ink-light, hsl(210, 14%, 34%));
    white-space: nowrap;
}

/* ============================================
   Justifications (Expandable)
   ============================================ */

.justifications {
    border-top: 1px solid var(--border-color, var(--border, hsl(35, 12%, 85%)));
    margin-top: var(--space-2, 0.5rem);
    padding-top: var(--space-2, 0.5rem);
}

.justifications summary {
    display: flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    font-size: 0.8125rem;
    color: var(--text-secondary, var(--muted, hsl(200, 10%, 48%)));
    cursor: pointer;
    padding: var(--space-1, 0.25rem) 0;
    list-style: none;
    transition: color var(--transition-fast, 150ms ease);
}

.justifications summary::-webkit-details-marker {
    display: none;
}

.justifications summary:hover {
    color: var(--text-primary, var(--ink, hsl(215, 20%, 12%)));
}

.summary-icon {
    display: flex;
    align-items: center;
    transition: transform var(--transition-fast, 150ms ease);
}

.justifications[open] .summary-icon {
    transform: rotate(90deg);
}

.justifications-content {
    padding: var(--space-3, 0.75rem) var(--space-2, 0.5rem) var(--space-2, 0.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
}

.justification-item {
    font-size: 0.8125rem;
    line-height: 1.6;
    padding: var(--space-2, 0.5rem) 0;
}

.justification-item:not(:last-child) {
    border-bottom: 1px solid var(--border-light, hsl(35, 10%, 91%));
    padding-bottom: var(--space-3, 0.75rem);
    margin-bottom: var(--space-2, 0.5rem);
}

.justification-item strong {
    display: block;
    color: var(--ink-light, hsl(210, 14%, 34%));
    margin-bottom: var(--space-1, 0.25rem);
}

.justification-item p {
    margin: 0;
    color: var(--text-secondary, var(--muted, hsl(200, 10%, 48%)));
    padding-left: var(--space-2, 0.5rem);
    border-left: 2px solid var(--border-color, var(--border, hsl(35, 12%, 85%)));
}

/* ============================================
   Charts View
   ============================================ */

.sentiment-charts-view {
    padding: var(--space-2, 0.5rem);
}

.chart-container {
    background: var(--bg-surface, var(--surface, hsl(40, 20%, 99%)));
    border-radius: var(--radius-md, 0.75rem);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
    padding: var(--space-5, 1.25rem);
    max-width: 500px;
    margin: 0 auto;
}

.chart-container h4 {
    margin: 0 0 var(--space-4, 1rem) 0;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, var(--ink, hsl(215, 20%, 12%)));
    text-align: center;
}

.chart-wrapper {
    position: relative;
    width: 100%;
    height: 300px;
}

.charts-legend {
    background: var(--bg-muted, var(--surface-raised, hsl(38, 18%, 97%)));
    border-radius: var(--radius-sm, 0.375rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    margin-top: var(--space-4, 1rem);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.charts-legend p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ink-light, hsl(210, 14%, 34%));
    line-height: 1.5;
}

.charts-legend strong {
    color: var(--text-primary, var(--ink, hsl(215, 20%, 12%)));
}

/* ============================================
   Footer
   ============================================ */

.sentiment-footer {
    margin-top: var(--space-6, 1.5rem);
    padding-top: var(--space-4, 1rem);
    border-top: 1px solid var(--border-color, var(--border, hsl(35, 12%, 85%)));
}

.methodology-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 0.5rem);
    font-size: 0.75rem;
    color: var(--text-secondary, var(--muted, hsl(200, 10%, 48%)));
    line-height: 1.5;
}

.methodology-note svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* ============================================
   Error & Empty States
   ============================================ */

.iwac-sentiment-error,
.iwac-sentiment-none {
    padding: var(--space-6, 1.5rem);
    background: var(--bg-muted, var(--surface-raised, hsl(38, 18%, 97%)));
    border: 1px solid var(--border-color, var(--border, hsl(35, 12%, 85%)));
    border-radius: var(--radius-md, 0.75rem);
    color: var(--text-secondary, var(--muted, hsl(200, 10%, 48%)));
    font-size: 0.9375rem;
    text-align: center;
}

.iwac-sentiment-error {
    background: var(--error-bg, hsl(355, 90%, 96%));
    border-color: hsl(355, 70%, 85%);
    color: var(--error, hsl(355, 90%, 47%));
}

/* ============================================
   Container Query - Narrow Context (Sidebars)
   ============================================ */

@container sentiment-block (max-width: 380px) {
    .sentiment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3, 0.75rem);
        margin-bottom: var(--space-4, 1rem);
        padding-bottom: var(--space-3, 0.75rem);
    }

    .sentiment-title {
        font-size: 1.0625rem;
    }

    .header-controls {
        width: 100%;
        justify-content: flex-start;
    }

    .card-header {
        padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
        padding-top: 0.625rem;
    }

    .model-logo {
        width: 20px;
        height: 20px;
    }

    .model-name {
        font-size: 0.875rem;
    }

    .card-body {
        padding: var(--space-3, 0.75rem);
        gap: var(--space-2, 0.5rem);
    }

    .metric-label {
        font-size: 0.6875rem;
    }

    .metric-value {
        font-size: 0.875rem;
        flex-wrap: wrap;
    }

    .polarity-badge {
        padding: 0.1875rem var(--space-2, 0.5rem);
        font-size: 0.75rem;
    }

    .centrality-dots {
        margin-left: var(--space-1, 0.25rem);
    }

    .subjectivity-display {
        gap: var(--space-2, 0.5rem);
    }

    .subjectivity-bar {
        height: 6px;
    }

    .score-label {
        font-size: 0.75rem;
    }

    .justifications summary {
        font-size: 0.75rem;
    }

    .justification-item {
        font-size: 0.75rem;
    }

    .methodology-note {
        font-size: 0.6875rem;
    }

    .sentiment-footer {
        margin-top: var(--space-4, 1rem);
        padding-top: var(--space-3, 0.75rem);
    }

    /* Hide charts toggle in very narrow contexts */
    .view-toggle-btn[data-view="charts"] {
        display: none;
    }

    /* Hide charts view completely */
    .sentiment-charts-view {
        display: none !important;
    }
}

/* Even narrower - very compact sidebar */
@container sentiment-block (max-width: 300px) {
    .iwac-sentiment-block {
        padding: var(--space-2, 0.5rem);
        margin: var(--space-4, 1rem) 0;
    }

    .sentiment-title {
        font-size: 1rem;
    }

    .sentiment-title svg {
        width: 16px;
        height: 16px;
    }

    .view-toggle {
        display: none;
    }

    .metric-value {
        font-size: 0.8125rem;
    }

    .centrality-dots .dot {
        font-size: 0.625rem;
    }

    .sentiment-footer {
        margin-top: var(--space-3, 0.75rem);
        padding-top: var(--space-2, 0.5rem);
    }

    .methodology-note svg {
        width: 12px;
        height: 12px;
    }
}

/* Fallback for browsers without container query support */
/* Target sidebar context via ancestor selector */
.sidebar-region .iwac-sentiment-block {
    margin: var(--space-4, 1rem) 0;
}

.sidebar-region .sentiment-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4, 1rem);
}

.sidebar-region .sentiment-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3, 0.75rem);
}

.sidebar-region .sentiment-title {
    font-size: 1.0625rem;
}

.sidebar-region .header-controls {
    width: 100%;
}

.sidebar-region .model-name {
    font-size: 0.875rem;
}

.sidebar-region .card-body {
    padding: var(--space-3, 0.75rem);
}

.sidebar-region .sentiment-charts-view {
    display: none !important;
}

.sidebar-region .view-toggle-btn[data-view="charts"] {
    display: none;
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .iwac-sentiment-block {
        background: #ffffff;
        border: 1px solid #000000;
        box-shadow: none;
    }

    .sentiment-card {
        box-shadow: none;
        border: 1px solid #cccccc;
        break-inside: avoid;
    }

    .view-toggle,
    .sentiment-charts-view {
        display: none !important;
    }

    .justifications {
        display: block;
    }

    .justifications[open] .justifications-content {
        display: block;
    }
}

/* ============================================
   Responsive Adjustments
   ============================================ */

/* Tablet landscape and below */
@media (max-width: 1024px) {
    .sentiment-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    }
}

/* Tablet portrait */
@media (max-width: 768px) {
    .iwac-sentiment-block {
        margin: var(--space-6, 1.5rem) 0;
        padding: var(--space-4, 1rem);
    }

    .sentiment-title {
        font-size: 1.125rem;
    }

    .sentiment-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
        gap: var(--space-4, 1rem);
    }

    .chart-wrapper {
        height: 280px;
    }

    .chart-container {
        max-width: 100%;
    }
}

/* Mobile landscape */
@media (max-width: 640px) {
    .iwac-sentiment-block {
        margin: var(--space-4, 1rem) 0;
        padding: var(--space-3, 0.75rem);
    }

    .sentiment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3, 0.75rem);
    }

    .header-controls {
        width: 100%;
        justify-content: space-between;
    }

    .sentiment-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3, 0.75rem);
    }

    .chart-wrapper {
        height: 260px;
    }

    .charts-legend {
        padding: var(--space-3, 0.75rem);
    }

    .charts-legend p {
        font-size: 0.75rem;
    }
}

/* Mobile portrait - small screens */
@media (max-width: 480px) {
    .iwac-sentiment-block {
        margin: var(--space-3, 0.75rem) 0;
        padding: var(--space-2, 0.5rem);
        border-radius: var(--radius-sm, 0.375rem);
    }

    .sentiment-title {
        font-size: 1rem;
    }

    .sentiment-title svg {
        width: 18px;
        height: 18px;
    }

    .card-header {
        padding: var(--space-3, 0.75rem);
    }

    .model-logo {
        width: 20px;
        height: 20px;
    }

    .model-name {
        font-size: 0.875rem;
    }

    .card-body {
        padding: var(--space-3, 0.75rem);
        gap: var(--space-2, 0.5rem);
    }

    .metric-label {
        font-size: 0.6875rem;
    }

    .metric-value {
        font-size: 0.875rem;
    }

    .polarity-badge {
        padding: 0.1875rem var(--space-2, 0.5rem);
        font-size: 0.75rem;
    }

    .subjectivity-bar {
        height: 6px;
    }

    .score-label {
        font-size: 0.75rem;
    }

    .justifications summary {
        font-size: 0.75rem;
    }

    .justification-item {
        font-size: 0.75rem;
    }

    .chart-wrapper {
        height: 240px;
    }

    .methodology-note {
        font-size: 0.6875rem;
    }

    .methodology-note svg {
        width: 12px;
        height: 12px;
    }
}

/* Extra small screens */
@media (max-width: 360px) {
    .sentiment-header {
        gap: var(--space-2, 0.5rem);
    }

    .header-controls {
        flex-wrap: wrap;
        gap: var(--space-2, 0.5rem);
    }

    .view-toggle-btn {
        padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    }

    .chart-wrapper {
        height: 220px;
    }
}