/* ==========================================================================
   WASLA AI - RESPONSIVE STYLES
   ========================================================================== */

/* Large Tablets & Small Desktops (1024px) */
@media (max-width: 1024px) {
    .hero-grid {
        gap: 30px;
    }

    .hero-title {
        font-size: 48px;
    }

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

    .dashboard-full-preview {
        flex-direction: column;
        height: auto;
    }

    .dash-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--surface-border);
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 16px 24px;
        gap: 20px;
    }

    .dash-menu {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .dash-menu li {
        white-space: nowrap;
    }

    .dash-charts-area {
        grid-template-columns: 1fr;
    }

    .integrations-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .feature-list {
        align-items: center;
    }

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

/* Tablets (768px) */
@media (max-width: 768px) {
    .nav-actions {
        display: none;
    }

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

    .main-nav {
        display: none;
        /* Add mobile menu logic in JS if needed */
    }

    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 40px;
    }

    .hero-content {
        margin: 0 auto;
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-title {
        font-size: 42px;
    }

    .hero-visual {
        margin-top: 40px;
    }

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

    .section-title {
        font-size: 32px;
    }

    .cinematic-heading {
        font-size: 40px;
    }

    .dash-stats {
        grid-template-columns: 1fr;
    }
}

/* Mobile Large (640px) */
@media (max-width: 640px) {
    .chat-modal {
        width: calc(100vw - 20px);
        height: calc(100vh - 24px);
        max-height: calc(100vh - 24px);
        border-radius: 24px;
    }

    .chat-hero {
        padding: 40px 16px 16px;
    }

    .ai-avatar-premium {
        width: 72px;
        height: 72px;
    }

    .chat-title-premium {
        font-size: 24px;
    }

    .chat-system-header {
        padding: 12px 16px;
    }

    .system-metrics {
        gap: 10px;
    }

    .metric-val {
        font-size: 12px;
    }

    .metric-lbl {
        font-size: 8px;
    }

    .header-name {
        font-size: 13px;
    }

    .header-status {
        font-size: 10px;
    }
}

/* Mobile Devices (480px) */
@media (max-width: 480px) {
    .hero-title {
        font-size: 36px;
    }

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

    .btn-massive {
        width: 100%;
    }

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

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

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .orchestration-map {
        height: 300px;
    }

    .map-nodes {
        flex-direction: column;
        transform: scale(0.7);
    }

    .map-path.horizontal {
        width: 2px;
        height: 40px;
        margin: 10px 0;
    }
}

/* Automation Modal Responsive */
@media (max-width: 640px) {
    .auto-steps-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .auto-step {
        flex-direction: row;
        width: 100%;
        text-align: left;
    }

    html[dir="rtl"] .auto-step {
        text-align: right;
    }

    .auto-step-line {
        width: 2px;
        height: 24px;
        margin: 0 0 0 15px;
    }

    html[dir="rtl"] .auto-step-line {
        margin: 0 15px 0 0;
    }

    @keyframes move-dot-vertical {
        0% {
            top: 0%;
            opacity: 0;
        }

        10% {
            opacity: 1;
        }

        90% {
            opacity: 1;
        }

        100% {
            top: 100%;
            opacity: 0;
        }
    }

    .auto-modal-overlay:not([hidden]) .auto-step-line .a-dot {
        left: -2px;
        animation: move-dot-vertical 2s infinite linear;
    }

    .auto-modal {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 24px);
        border-radius: 24px;
        padding: 20px;
    }

    .auto-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }
}