/* ============================================================
   Shared mobile performance + touch baseline
   Link after each surface's own CSS:
     <link rel="stylesheet" href="/mobile-perf.css">
   Kills canvas particles, blur spheres, and heavy backdrop-filter
   on phones / reduced-motion. Also sets safe-area-aware basics.
   ============================================================ */

:root {
    --mobile-top-offset: 56px;
}

@media (max-width: 768px) {
    body {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    #particle-canvas,
    #security-canvas,
    .particle-background,
    .ambient-sphere {
        display: none !important;
    }

    .ambient-bg {
        width: 100% !important;
        height: 100% !important;
        max-width: 100%;
    }

    .glass-card,
    .settings-card,
    .command-card,
    .glass-header,
    .switch-wrapper,
    .collapsible-header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .nav-item,
    .sidebar-nav-item,
    .btn-primary,
    .btn-modern,
    .input-dark,
    .input-modern,
    .filter-btn,
    .mobile-menu-btn {
        min-height: 44px;
    }

    .mobile-menu-btn {
        width: 44px;
        height: 44px;
        top: max(12px, env(safe-area-inset-top, 0px));
        left: max(12px, env(safe-area-inset-left, 0px));
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .input-dark,
    .input-modern,
    input[type="text"],
    input[type="search"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important; /* prevent iOS focus zoom */
    }

    .toast {
        min-width: 0 !important;
        width: calc(100vw - 32px) !important;
        max-width: 100% !important;
        left: 16px !important;
        right: 16px !important;
        box-sizing: border-box;
    }

    [style*="min-width: 220px"],
    [style*="min-width: 250px"],
    [style*="min-width: 200px"] {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #particle-canvas,
    #security-canvas,
    .particle-background,
    .ambient-sphere {
        display: none !important;
    }

    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}