/* ================================================
   BUDDY OS — MOBILE CSS
   Clean mobile-first implementation
   ================================================ */

/* ================================================
   MOBILE (< 769px)
   ================================================ */
@media (max-width: 768px) {

    /* ---- Layout ---- */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        min-height: 100vh !important;
        gap: 0 !important;
    }

    .sidebar {
        display: none !important;
    }

    .dashboard-main {
        grid-column: 1 !important;
        width: 100% !important;
    }

    .dashboard-topbar {
        display: none !important;
    }

    /* ---- Section visibility — CSS controls this ---- */
    /* All sections hidden by default on mobile */
    .section-section {
        display: none !important;
    }

    /* Active section visible */
    .section-section.active-section {
        display: block !important;
    }

    /* ---- Bottom mobile nav ---- */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 64px !important;
        background: #ffffff !important;
        border-top: 1px solid #f0f0f0 !important;
        z-index: 9999 !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 0 !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06) !important;
    }

    .mobile-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 8px 4px !important;
        font-size: 0.6rem !important;
        font-weight: 500 !important;
        color: #888888 !important;
        text-decoration: none !important;
        flex: 1 !important;
        cursor: pointer !important;
        border: none !important;
        background: none !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
    }

    .mobile-nav-item svg {
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0 !important;
    }

    .mobile-nav-item.active {
        color: var(--accent) !important;
    }

    /* ---- Stats row: 1 column on mobile ---- */
    .stats-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .stat-card {
        padding: 16px !important;
    }

    /* ---- Quick actions: 2 columns ---- */
    .quick-actions {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .action-card {
        padding: 16px 12px !important;
    }

    .action-card h4 {
        font-size: 0.85rem !important;
    }

    .action-card p {
        display: none !important;
    }

    /* ---- Files grid ---- */
    #my-files-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* ---- Overview: chat hero layout ---- */
    #section-overview {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100vh - 64px) !important;
        padding: 0 !important;
    }

    #hero-chat-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 12px !important;
    }

    /* ---- All sections: bottom padding for nav ---- */
    #section-create,
    #section-files,
    #section-conversations,
    #section-stats,
    #section-integrations,
    #section-settings,
    #section-codelab {
        padding: 16px !important;
        padding-bottom: 80px !important;
    }

    /* ---- Hide desktop sidebar elements ---- */
    #hamburger-btn,
    button[onclick*="toggleSidebar"],
    .sidebar-close,
    #sidebar-backdrop {
        display: none !important;
    }

    /* ---- Modals ---- */
    .modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 10000 !important;
    }

    .modal-content {
        width: 95% !important;
        margin: 10% auto !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    /* ---- Code Lab ---- */
    #section-codelab {
        height: calc(100vh - 64px) !important;
    }

    #code-editor {
        font-size: 13px !important;
        min-height: 200px !important;
    }

    /* ---- Notifications ---- */
    .notification {
        top: 16px !important;
        right: 16px !important;
        left: 16px !important;
    }

    /* ---- Buy button ---- */
    .buy-tasks-btn {
        top: 8px !important;
        right: 8px !important;
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
    }

    /* ---- Folder cards ---- */
    .folder-card {
        padding: 12px !important;
    }

    /* ---- iOS: prevent zoom on input focus ---- */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ================================================
   SMALL MOBILE (< 481px)
   ================================================ */
@media (max-width: 480px) {
    .quick-actions {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .action-card {
        padding: 12px 8px !important;
    }

    .action-card h4 {
        font-size: 0.8rem !important;
    }

    .stats-row {
        grid-template-columns: 1fr !important;
    }

    .stat-card {
        padding: 14px !important;
    }

    .stat-value {
        font-size: 1.4rem !important;
    }

    #my-files-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .mobile-nav-item {
        font-size: 0.55rem !important;
        padding: 6px 2px !important;
    }

    .mobile-nav-item svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ================================================
   BUTTON ACTIVE STATES (all sizes)
   ================================================ */
.style-btn.active,
.ratio-btn.active,
.dur-btn.active,
.qual-btn.active {
    background: var(--accent) !important;
    color: white !important;
    border-color: var(--accent) !important;
}

/* ================================================
   TABLET (769px - 1024px) — hamburger sidebar mode
   Sidebar hidden by default, slides in via JS .mobile-open
   ================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Reset layout to single column */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    /* Sidebar hidden by default */
    .sidebar {
        display: none !important;
    }

    /* Sidebar shown when JS adds .mobile-open class */
    .sidebar.mobile-open {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        z-index: 2000 !important;
        background: var(--bg-secondary) !important;
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.15) !important;
        flex-direction: column !important;
    }

    /* Close button: hidden by default, shown when sidebar open */
    .sidebar-close {
        display: none !important;
    }

    /* Backdrop: hidden by default, shown when sidebar open */
    #sidebar-backdrop {
        display: none !important;
    }

    .dashboard-main {
        grid-column: 1 !important;
        padding: 24px !important;
    }

    /* No mobile bottom nav on tablet */
    .mobile-bottom-nav {
        display: none !important;
    }

    /* Hamburger visible on tablet */
    #tablet-hamburger {
        display: block !important;
    }
}
/* Folder grid: 2 cols mobile, 4 cols desktop */
@media (min-width: 769px) {
    .folder-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .folder-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        overflow-x: hidden !important;
    }
    
    .folder-card {
        padding: 20px 12px !important;
    }
    
    .folder-card .icon,
    .folder-card svg {
        font-size: 2.5rem;
    }
}
/* ================================================
   CREATE PAGE MOBILE LAYOUT FIXES
   Fixes cramped, asymmetric layout on small screens
   ================================================ */
@media (max-width: 768px) {
    /* Style chips: 3 per row, consistent gap, no orphans */
    .style-btn {
        font-size: 0.78rem !important;
        padding: 8px 4px !important;
        flex: 1 1 30% !important;
        min-width: 30% !important;
        max-width: 30% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Shape buttons: equal width */
    .ratio-btn {
        flex: 1 !important;
        justify-content: center !important;
        padding: 10px 4px !important;
        font-size: 0.8rem !important;
    }

    /* Prompt inputs */
    #image-prompt,
    #video-prompt {
        padding: 14px !important;
        font-size: 0.9rem !important;
    }

    /* Section labels spacing */
    .section-section label {
        margin-top: 8px !important;
        margin-bottom: 10px !important;
    }
    
    /* Card sections: consistent gap */
    .section-section > div[style*="margin-bottom"] {
        margin-bottom: 16px !important;
    }
}
/* Style buttons: force equal width via CSS too */
@media (max-width: 768px) {
    .style-btn {
        min-width: 0 !important;
        flex: 1 1 0% !important;
        width: 0 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Shape section: prevent overflow */
    .section-section [style*=flex-wrap:wrap] {
        flex-wrap: wrap !important;
    }
}
/* CREATE PAGE: force all button groups to equal-width grid */
@media (max-width: 768px) {
    .style-btn, .ratio-btn, .dur-btn, .qual-btn {
        padding: 14px 8px !important;
        font-size: 0.85rem !important;
        min-width: 0 !important;
    }
    
    /* Duration: equal grid */
    .dur-btn {
        padding: 14px !important;
        border-radius: 10px !important;
    }
    
    /* Quality: 4 cols on mobile */
    .qual-btn {
        padding: 12px 4px !important;
        font-size: 0.8rem !important;
    }
}/* ================================================
   CREATE PAGE: 100% CONSISTENT BUTTON SIZING
   All buttons same width, same height, same padding
   ================================================ */

/* Force equal sizing for ALL button classes */
.style-btn,
.ratio-btn,
.dur-btn,
.qual-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 14px 8px !important;
    box-sizing: border-box !important;
    font-size: 0.85rem !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

/* Grid containers: force equal columns */
#section-create [style*="grid-template-columns:repeat(3,1fr)"],
#section-create [style*="grid-template-columns: repeat(3,1fr)"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

#section-create [style*="grid-template-columns:repeat(2,1fr)"],
#section-create [style*="grid-template-columns: repeat(2,1fr)"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

#section-create [style*="grid-template-columns:repeat(4,1fr)"],
#section-create [style*="grid-template-columns: repeat(4,1fr)"] {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
}

/* Duration grid: 2 equal cols */
#section-create [style*="1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Shape buttons: align icon+text vertically centered */
.ratio-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

/* Active states */
.style-btn.active,
.ratio-btn.active,
.dur-btn.active,
.qual-btn.active {
    background: var(--accent) !important;
    color: white !important;
    border-color: var(--accent) !important;
}

/* On mobile: force consistent heights */
@media (max-width: 768px) {
    .style-btn,
    .ratio-btn,
    .dur-btn,
    .qual-btn {
        min-height: 56px !important;
        padding: 12px 6px !important;
        font-size: 0.82rem !important;
    }
    
    /* Quality 4-across on mobile: smaller padding */
    #section-create .qual-btn {
        min-height: 52px !important;
        padding: 12px 4px !important;
        font-size: 0.78rem !important;
    }
}/* ================================================
   CREATE PAGE: FORCE ALL BUTTONS TO BE IDENTICAL
   ================================================ */
#section-create .style-btn,
#section-create .ratio-btn,
#section-create .dur-btn,
#section-create .qual-btn {
    /* Sizing */
    width: 100% !important;
    min-height: 56px !important;
    max-height: none !important;
    padding: 14px 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    
    /* Typography */
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    
    /* Appearance */
    border-radius: 20px !important;
    border: 2px solid var(--border) !important;
    background: var(--bg-secondary) !important;
    
    /* Interaction */
    cursor: pointer !important;
    transition: all 0.2s !important;
    
    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Active state - accent color */
#section-create .style-btn.active,
#section-create .ratio-btn.active,
#section-create .dur-btn.active,
#section-create .qual-btn.active {
    background: var(--accent) !important;
    color: white !important;
    border-color: var(--accent) !important;
}

/* Ratio buttons: icons */
#section-create .ratio-btn svg {
    flex-shrink: 0 !important;
}

/* Quality buttons: smaller border-radius */
#section-create .qual-btn {
    border-radius: 8px !important;
}

/* Mobile: force smaller but still equal */
@media (max-width: 768px) {
    #section-create .style-btn,
    #section-create .ratio-btn,
    #section-create .dur-btn,
    #section-create .qual-btn {
        min-height: 52px !important;
        font-size: 0.82rem !important;
        padding: 12px 4px !important;
    }
}/* ================================================
   FILES PAGE: Force all folder cards equal size
   ================================================ */
#section-files .folder-card,
.folder-card {
    width: 100% !important;
    min-height: 100px !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

#section-files .folder-card .icon-area,
.folder-card [style*="font-size:3rem"] {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 768px) {
    #section-files .folder-card,
    .folder-card {
        min-height: 90px !important;
        padding: 14px 12px !important;
    }
}