/* --- Mobile CSS for Bot Not Code --- */
/* Designed for iPhone & Android responsiveness */

@media (max-width: 768px) {
    /* --- Layout & Container --- */
    body {
        overflow-x: hidden;
        font-size: 16px; /* Prevent zooming on iOS input focus */
        overscroll-behavior-y: none; /* Prevent pull-to-refresh on mobile if desired */
    }

    .app-container {
        flex-direction: column;
        overflow-x: hidden;
        height: 100vh;
        width: 100vw;
        position: relative;
    }

    .main-content {
        padding: 80px 15px 100px 15px; /* Top for header, bottom for safe area */
        width: 100%;
        margin-left: 0;
        height: 100%; /* Take full height */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        box-sizing: border-box;
    }

    /* --- Sidebar & Navigation --- */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        z-index: 2000;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 5px 0 25px rgba(0,0,0,0.5);
        background: #111; /* Ensure background is solid */
    }

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

    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.6);
        z-index: 1999;
        display: none;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    
    .sidebar-overlay.visible {
        display: block;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 1500;
        background: rgba(30, 31, 34, 0.9);
        border: 1px solid rgba(255,255,255,0.1);
        width: 44px;
        height: 44px;
        border-radius: 12px;
        color: white;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        backdrop-filter: blur(10px);
    }

    /* --- Global Typography & Elements --- */
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }

    .header {
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .header h1 {
        margin-top: 10px; /* Space for menu button */
        padding-left: 50px; /* Avoid overlap with menu button */
        line-height: 1.2;
    }
    
    .header p {
        padding-left: 50px;
        font-size: 0.9rem;
        opacity: 0.7;
    }

    .btn-primary, .btn-secondary, .btn-danger, .btn {
        width: 100%; /* Full width buttons for easier tapping */
        margin-bottom: 10px;
        padding: 14px; /* Larger touch target */
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 48px;
    }

    input, select, textarea {
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* --- Cards & Containers --- */
    .card, .stat-card, .review-card, .server-card, .emoji-card {
        padding: 16px;
        margin-bottom: 16px;
        border-radius: 16px;
        background: #18181b;
        border: 1px solid #27272a;
        width: 100%;
        box-sizing: border-box;
    }
    
    .stats-grid, .modules-grid, .reviews-grid, .server-grid, .emoji-grid, .community-grid {
        grid-template-columns: 1fr !important; /* Force single column */
        gap: 16px;
        display: grid;
        column-count: 1 !important; /* Override column-count for masonry layouts */
    }

    /* --- Community View Mobile --- */
    .community-filters {
        padding: 10px 5px;
        margin-bottom: 20px;
    }

    .filter-btn {
        padding: 10px 20px; /* Larger touch targets */
        font-size: 1rem;
    }

    .community-card {
        margin-bottom: 0; /* Handled by grid gap */
    }

    #btn-share-command {
        width: 100% !important; /* Full width share button */
    }

    /* --- Settings View Mobile --- */
    .settings-group {
        padding: 15px;
    }

    .settings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .settings-row input[type="text"],
    .settings-row input[type="password"],
    .settings-row select {
        width: 100%;
        margin-top: 5px;
    }

    /* --- Logs View Mobile --- */
    #logs-container {
        font-size: 12px;
        padding: 10px;
        overflow-x: auto; /* Allow horizontal scroll for long logs */
        white-space: pre; /* Keep formatting */
    }

    /* --- Flex Helpers --- */
    .flex-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .flex-between > * {
        width: 100%;
    }

    /* --- Automations View Mobile --- */
    #view-automations .header .flex-between > div:last-child {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    #btn-sync-commands, #btn-create-automation-menu {
        width: 100%;
    }
    
    #cmd-count-display {
        text-align: center;
        width: 100%;
        padding: 5px;
    }

    /* --- Emojis View Mobile --- */
    #view-emojis .card {
        flex-direction: column;
        align-items: stretch !important;
        gap: 15px !important;
    }

    #view-emojis label {
        min-width: auto !important;
        margin-bottom: 5px;
    }

    #view-emojis select {
        min-width: 100% !important;
        margin-bottom: 10px;
    }

    /* --- Storage View Mobile --- */
    #view-storage .header + .content-wrapper > div:first-child {
        /* The toolbar container */
        flex-direction: column;
        align-items: stretch !important;
        gap: 15px !important;
    }

    #view-storage .input-group {
        max-width: 100% !important;
        margin-bottom: 10px;
    }

    #view-storage .storage-grid-header {
        display: none !important; /* Hide header on mobile, use card layout */
    }

    /* --- Storage View Mobile --- */
    #view-storage .storage-grid-header {
        display: none !important;
    }

    #variables-list-container > div {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        padding: 16px !important;
        gap: 12px !important;
        height: auto !important;
        align-items: stretch !important;
    }
    
    /* Key */
    #variables-list-container > div > div:nth-child(1) {
        margin-bottom: 5px;
        justify-content: space-between;
        width: 100%;
    }

    /* Value */
    #variables-list-container > div > div:nth-child(2) {
        width: 100%;
        margin: 0 !important;
        white-space: normal !important; /* Allow wrapping if needed */
        word-break: break-all;
        max-height: 100px;
        overflow-y: auto;
    }

    /* Date */
    #variables-list-container > div > div:nth-child(3) {
        font-size: 0.8rem !important;
        color: #666;
        margin-top: 5px;
    }

    /* Actions */
    #variables-list-container > div > div:nth-child(4) {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.05);
        padding-top: 10px;
    }

    /* Storage Toolbar */
    #view-storage .content-wrapper > div:first-child { /* The toolbar */
        flex-direction: column;
        align-items: stretch !important;
        gap: 15px;
        padding: 15px !important;
    }

    #view-storage .input-group {
        min-width: 0 !important;
        width: 100%;
        max-width: none !important;
    }

    #view-storage .desktop-only {
        display: none !important;
    }

    #btn-add-variable {
        width: 100%;
        justify-content: center;
        padding: 12px;
    }
    
    #btn-add-variable i {
        margin-right: 0 !important; /* Center icon since text is hidden or maybe show text? */
    }
    
    /* Actually, let's keep text for add variable on mobile, it's useful */
    #view-storage .desktop-only {
        display: inline !important; 
    }
    
    #view-storage .input-group + button { /* Add variable button */
        flex: 1;
    }

    /* --- Tutorials View Mobile --- */
    #view-tuto .card > div {
        grid-template-columns: 1fr !important; /* Force single column for tutorials */
    }

    /* --- Landing Page Mobile --- */
    .landing-page .desktop {
        padding: 80px 15px 100px 15px; /* Adjust padding for mobile */
        height: auto;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .landing-page .desktop-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
        gap: 12px;
        align-content: start;
        padding-bottom: 80px; /* Space for dock */
    }

    .landing-page .app-icon {
        padding: 15px 10px;
        aspect-ratio: 1/1; /* Square icons */
    }

    .landing-page .app-icon i {
        font-size: 2rem;
        margin-bottom: 8px;
    }

    .landing-page .dock {
        width: 90%;
        bottom: 20px;
        padding: 8px 12px;
        justify-content: space-between;
    }

    .landing-page .dock-item {
        width: 100%; /* Distribute space */
        height: 48px; /* Larger touch target */
    }

    .landing-page .login-cta {
        position: relative;
        top: 0;
        right: 0;
        margin-bottom: 20px;
        justify-content: center;
        width: 100%;
    }

    .landing-page .login-cta button {
        flex: 1;
        justify-content: center;
    }

    /* --- Auth Mobile --- */
    .auth-card {
        padding: 24px;
        width: 90%;
        max-width: 100%;
        margin: 20px auto;
        border-radius: 24px;
    }

    /* --- Dashboard Specifics --- */
    #dashboard-alerts {
        margin-top: 10px;
    }

    /* --- Automations List --- */
    .command-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
        gap: 10px;
        background: rgba(255, 255, 255, 0.03);
    }

    .command-actions {
        width: 100%;
        justify-content: space-between;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.05);
        display: flex;
        flex-direction: row; /* Keep buttons side-by-side if they fit, or wrap */
        flex-wrap: wrap;
        gap: 10px;
    }

    .command-actions button {
        flex: 1;
        margin: 0;
        min-width: 45%;
    }

    /* --- Flow Editor Mobile (The Big Part) --- */
    #view-flow-editor {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 5000;
        background: var(--bg-dark);
        padding: 0 !important;
        margin: 0 !important;
        display: none; /* Hidden by default */
    }

    #view-flow-editor.active, #view-flow-editor:not(.hidden) {
        display: flex !important;
        flex-direction: column;
    }

    /* Hide Mobile Menu Button when Flow Editor is active */
    /* body:has(#view-flow-editor.active) #mobile-menu-toggle,
    body:has(#view-flow-editor:not(.hidden)) #mobile-menu-toggle {
        display: none !important;
    } */
    
    /* Also hide the button via JS class if :has support is concern (fallback) */
    /* .flow-active #mobile-menu-toggle {
        display: none !important;
    } */

    .flow-editor-wrapper {
        display: flex;
        flex-direction: column; /* Stack vertically on mobile */
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    /* Horizontal Toolbox at the top */
    .flow-toolbox {
        height: 100px;
        min-height: 100px;
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px;
        padding-left: 60px; /* Space for menu button */
        gap: 12px;
        background: #18181b;
        border-right: none;
        border-bottom: 1px solid #27272a;
        scroll-snap-type: x mandatory;
        white-space: nowrap;
        box-shadow: 0 4px 20px rgba(0,0,0,0.4);
        z-index: 100;
        /* Hide scrollbar */
        scrollbar-width: none; 
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }
    
    .flow-toolbox::-webkit-scrollbar {
        display: none;
    }

    .toolbox-item {
        min-width: 75px;
        width: 75px;
        height: 75px;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        font-size: 0.75rem;
        scroll-snap-align: start;
        margin-bottom: 0;
        display: inline-flex;
        background: #27272a;
        border-radius: 12px;
        white-space: normal;
        line-height: 1.1;
        padding: 5px;
    }
    
    .toolbox-item i {
        font-size: 1.5rem;
        margin-bottom: 6px;
    }
    
    .toolbox-search, .toolbox-header {
        display: none !important; /* Save space */
    }

    .flow-canvas-container {
        flex: 1;
        width: 100%;
        height: auto;
        /* Mobile touch optimization */
        touch-action: none; 
        position: relative;
        overflow: hidden; /* Canvas pans internally */
    }

    /* Nodes: Smaller for mobile */
    .flow-node {
        width: 260px !important; /* Smaller width */
        font-size: 0.9rem;
    }

    .flow-node-header {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    .flow-node-body {
        padding: 12px;
    }

    .flow-node-inputs input, 
    .flow-node-inputs select, 
    .flow-node-inputs textarea {
        font-size: 14px; /* Prevent zoom but keep small */
        padding: 8px;
    }

    /* Controls: Bottom bar */
    .flow-controls {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        background: rgba(24, 24, 27, 0.9);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 16px;
        padding: 8px;
        display: flex;
        justify-content: space-between;
        gap: 8px;
        backdrop-filter: blur(10px);
        top: auto; 
        right: auto;
        z-index: 200;
    }
    
    .flow-btn {
        flex: 1;
        justify-content: center;
        padding: 12px;
        font-size: 0.85rem;
    }

    /* Zoom Controls: Top Right overlay */
    .flow-controls-zoom {
        top: 110px; /* Below toolbox */
        right: 10px;
        left: auto;
        bottom: auto;
        flex-direction: column;
        background: rgba(24, 24, 27, 0.8);
        z-index: 150;
    }

    #btn-back-dashboard {
        display: none; /* Rely on 'Cancel' in flow controls */
    }

    /* --- AI View Mobile --- */
    #ai-input-section {
        height: calc(100vh - 180px) !important; /* Dynamic height */
        max-height: none !important;
    }

    #ai-chat-history {
        padding: 15px;
    }

    #ai-chat-input {
        padding-right: 50px !important;
    }

    /* --- Stats & Dashboard --- */
    .stat-card {
        padding: 16px !important; /* Reduce padding from 30px */
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .stat-card .icon {
        width: 48px;
        height: 48px;
        font-size: 1.4rem;
    }
    
    .stat-card .info .value {
        font-size: 1.8rem;
    }

    /* --- Command List --- */
    .command-list {
        padding: 0 0 40px 0 !important; /* Remove side padding */
    }
    
    .command-item {
        margin-bottom: 15px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 12px;
    }
    
    /* --- Server List --- */
    .server-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
        gap: 15px;
    }
    
    .server-meta {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .btn-leave-server {
        width: 100%;
        padding: 12px;
    }

    /* --- Interactive Elements --- */
    .toggle-switch {
        transform: scale(1.2); /* Easier touch target */
        margin-right: 10px;
    }
    
    .btn-icon {
        width: 48px;
        height: 48px; /* Larger touch target */
    }

    /* --- Sync Timer Mobile --- */
    #sync-timer-container {
        bottom: 80px; /* Move up to avoid being hidden by safe areas or bottom navs */
        right: 15px;
        font-size: 12px;
        padding: 8px 12px;
        backdrop-filter: blur(10px);
    }
    
    .sync-countdown {
        font-size: 14px;
    }

    /* --- Modals --- */
    .modal {
        align-items: flex-end; /* Sheet style on mobile */
        padding: 0;
    }

    .modal-content {
        width: 100%;
        margin: 0;
        max-height: 90vh;
        border-radius: 24px 24px 0 0; /* Rounded top */
        bottom: 0;
        top: auto;
        transform: none; /* Override center transform */
        left: 0;
        position: fixed;
        animation: slideUp 0.3s ease-out;
    }
    
    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    
    .modal-body {
        padding: 20px;
        max-height: 75vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .desktop-only {
        display: none !important;
    }
}

/* Default hidden states for mobile elements on desktop */
@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none;
    }
    .sidebar-overlay {
        display: none;
    }
}