/* ========================================
   Shared Mobile Stylesheet - AI Studio
   Cross-cutting responsive fixes for all pages
   ======================================== */

/* === Filter toggle (hidden on desktop, shown on mobile) === */
.filter-toggle-btn {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: var(--text-medium, #b0b8b8);
    font-size: 13px;
    cursor: pointer;
}
.filter-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}
/* Desktop: collapsible is transparent inline flex, flows with siblings */
.filter-collapsible {
    display: contents;
}
.filter-toggle-btn svg {
    transition: transform 0.2s ease;
}
.filter-toggle-btn.active svg {
    transform: rotate(180deg);
}

/* === Prevent iOS zoom on form focus === */
@media (max-width: 767px) {
    select,
    input,
    textarea,
    .form-select,
    .form-control {
        font-size: 16px !important;
    }
}

/* === Phone breakpoint (767px and below) === */
@media (max-width: 767px) {
    /* Navbar spacing */
    .navbar .container,
    .navbar .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Mobile collapse menu styling */
    .navbar-collapse {
        padding: 12px 0;
    }
    .navbar-collapse .navbar-nav .nav-link {
        padding: 10px 0;
        font-size: 1rem;
    }

    /* Mobile menu: Enquire + Login as full-width flat items */
    .navbar-collapse .navbar-enquire-btn {
        display: block;
        text-align: left;
        padding: 10px 0;
        background: none;
        border: none;
        border-radius: 0;
        height: auto;
        font-size: 1rem;
        color: var(--text-high);
    }
    .navbar-collapse .navbar-enquire-btn:hover {
        background: none;
        border: none;
        color: var(--teal-400);
    }
    .navbar-collapse .user-badge-container {
        padding: 0;
    }
    .navbar-collapse .user-badge {
        background: none;
        border: none;
        border-radius: 0;
        height: auto;
        padding: 10px 0;
        font-size: 1rem;
        justify-content: flex-start;
    }
    .navbar-collapse .user-badge:hover {
        background: none;
        border: none;
    }

    /* Zoo/builder hero — minimal on mobile */
    .zoo-hero {
        padding: 4px 0 2px 0;
    }
    .zoo-hero-title {
        font-size: 1.25rem;
    }
    .zoo-hero-sub,
    .zoo-hero-line {
        display: none;
    }

    /* Content offset — navbar is shorter on mobile */
    .page-model-zoo .main-content,
    .page-model-builder,
    .pipeline-main {
        padding-top: 60px;
    }

    /* Builder/garden mode bars */
    .builder-mode-bar,
    .garden-mode-bar {
        padding: 6px 0;
    }

    /* Inline quota - compact */
    .inline-quota {
        font-size: 11px;
        padding: 2px 6px;
        gap: 4px;
    }

    /* Filter bars — collapsible on mobile */
    .zoo-filters {
        padding: 8px 0 !important;
    }
    .zoo-filters .container {
        flex-wrap: wrap;
    }
    .zoo-filters .filter-toggle-btn {
        display: flex;
    }
    .zoo-filters .filter-collapsible {
        display: none;
        width: 100%;
    }
    .zoo-filters .filter-collapsible.show {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 8px;
    }

    /* Toast positioning - respect safe areas */
    .toast-container {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        top: auto !important;
    }

    .toast-container > .toast {
        width: 100%;
        max-width: none;
    }
}

/* === Small phone (480px and below) === */
@media (max-width: 480px) {
    /* Tighter page padding for small screens */
    body {
        padding-left: 0;
        padding-right: 0;
    }
}

/* === iOS safe area support === */
@supports (padding: env(safe-area-inset-bottom)) {
    .toast-container {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .navbar.fixed-top {
        padding-top: env(safe-area-inset-top);
    }

    /* Bottom-anchored elements */
    .batch-progress,
    .queue-actions {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .selection-bar {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .upload-progress {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* === Disable hover lift effects on touch devices === */
@media (hover: none) {
    .project-card:hover {
        transform: none;
        box-shadow: none;
    }

    .feature-card:hover {
        transform: none;
        box-shadow: none;
    }

    .glass-card:hover {
        transform: none;
    }

    .example-thumb:hover {
        transform: none;
        box-shadow: none;
    }

    /* Show card actions always on touch (no hover to reveal) */
    .project-card .project-card-actions {
        opacity: 1;
    }
}