@media (max-width: 1150px) {
    .hero-section {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        min-height: 300px;
    }

    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    :root {
        --sidebar-width: 260px;
    }

    .sidebar {
        transform: translateX(-105%);
        transition: transform var(--transition-normal);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-wrapper {
        width: 100%;
        margin-left: 0;
    }

    .menu-button {
        display: grid;
    }

    .topbar {
        padding: 16px 20px;
    }

    .page-content {
        padding: 24px 20px;
    }

    .hero-section {
        padding: 36px 28px;
    }
}

@media (max-width: 700px) {
    .connection-badge {
        display: none;
    }

    .page-heading p {
        display: none;
    }

    .module-grid,
    .feature-grid {
        grid-template-columns: 1fr;
    }

    .feature-list {
        grid-template-columns: 1fr;
    }

    .hero-section {
        min-height: auto;
        padding: 30px 22px;
    }

    .hero-visual {
        min-height: 270px;
    }

    .hero-content h2 {
        font-size: 34px;
    }

    .footer {
        flex-direction: column;
        padding: 22px 20px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .topbar {
        gap: 10px;
    }

    .page-heading h2 {
        font-size: 15px;
    }

    .topbar-actions {
        gap: 8px;
    }

    .theme-icon {
        display: none;
    }

    .page-content {
        padding: 18px 14px;
    }

    .hero-section {
        padding: 26px 18px;
        border-radius: 18px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions a {
        width: 100%;
    }

    .hero-visual {
        display: none;
    }

    .module-card {
        padding: 22px;
    }

    .modal-actions {
        flex-direction: column;
    }

    .modal-actions button {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .analyzer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .question-card {
        grid-column: span 2;
    }
}

@media (max-width: 850px) {
    .analyzer-grid {
        grid-template-columns: 1fr;
    }

    .question-card {
        grid-column: auto;
    }

    .metadata-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .analyzer-header {
        flex-direction: column;
    }

    .analyzer-header > button {
        width: 100%;
    }

    .metadata-grid {
        grid-template-columns: 1fr;
    }

    .response-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .response-actions {
        width: 100%;
    }

    .response-actions button {
        flex: 1;
    }
}
/* =========================================================
   CSV ANALYZER RESPONSIVE
========================================================= */

@media (max-width: 1250px) {
    .overview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dataset-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 950px) {
    .chart-grid {
        grid-template-columns: 1fr;
    }

    .recommend-card {
        grid-template-columns: 1fr;
    }

    .timeline {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .timeline-item {
        min-width: 90px;
    }

    .timeline-line {
        min-width: 55px;
    }
}

@media (max-width: 700px) {
    .overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dataset-info-grid {
        grid-template-columns: 1fr;
    }

    .upload-card {
        padding: 22px;
    }

    .health-card {
        align-items: flex-start;
    }

    .health-score {
        font-size: 24px;
    }

    #previewSection,
    #timelineSection,
    #chartSection,
    #healthSection {
        padding: 18px;
    }

    .chart-card {
        min-height: 280px;
    }

    .chart-card img {
        max-height: 220px;
    }
}

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

    .health-card {
        flex-direction: column;
    }

    .timeline {
        gap: 2px;
    }

    .timeline-item {
        min-width: 78px;
    }

    .timeline-line {
        min-width: 35px;
    }

    .timeline-circle {
        width: 32px;
        height: 32px;
    }

    .section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .chart-card {
        padding: 14px;
    }

    .recommend-card {
        padding: 20px;
    }

    #analyzeCsvButton {
        width: 100%;
    }
}
/* Chart Modal Responsive */

@media (max-width: 700px) {
    .chart-modal-overlay {
        padding: 12px;
    }

    .chart-modal-card {
        width: 100%;
        max-height: 96vh;

        border-radius: 17px;
    }

    .chart-modal-body {
        min-height: 300px;
        padding: 14px;
    }

    .chart-modal-body img {
        max-height: 58vh;
    }

    .chart-modal-actions {
        flex-direction: column;
    }

    .chart-modal-actions button {
        width: 100%;
    }
}
@media (max-width: 520px) {
    #analyzeCsvButton,
    #exportCsvReportButton {
        width: 100%;
    }
}
@media (max-width: 600px) {
    .ai-report-metric {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .ai-service-error {
        flex-direction: column;
    }
}
@media (max-width: 520px) {
    .about-tech-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .splash-logo {
        width: 78px;
        height: 78px;

        font-size: 37px;
    }

    .splash-content h1 {
        font-size: 29px;
    }

    .footer {
        align-items: center;
    }
}
/* =========================================================
   COLLAPSIBLE SIDEBAR RESPONSIVE
========================================================= */

@media (max-width: 900px) {
    body.sidebar-collapsed .sidebar {
        width: var(--sidebar-width);

        padding: 26px 18px;
    }

    body.sidebar-collapsed .main-wrapper {
        width: 100%;
        margin-left: 0;
    }

    body.sidebar-collapsed .brand {
        justify-content: flex-start;

        padding: 4px 8px 24px;
    }

    body.sidebar-collapsed .brand-content {
        display: block;
    }

    body.sidebar-collapsed .nav-item {
        justify-content: flex-start;

        padding: 13px 14px;
    }

    body.sidebar-collapsed .nav-item span {
        display: inline;
    }

    body.sidebar-collapsed .nav-item i {
        font-size: inherit;
    }

    body.sidebar-collapsed .ai-status {
        justify-content: flex-start;

        padding: 14px;
    }

    body.sidebar-collapsed
    .ai-status
    > div:not(.status-dot) {
        display: block;
    }

    body.sidebar-collapsed #sidebarResetButton {
        padding: 11px 18px;

        font-size: 13px;
    }

    body.sidebar-collapsed #sidebarResetButton i {
        font-size: inherit;
    }
}