/**
 * Trix Email - Mobile Layout (LinkedIn Style)
 */

/* ========================================
   Mobile Top Bar - Hidden on Desktop
   ======================================== */
.trix-mobile-top-bar {
    display: none;
}

/* ========================================
   Mobile Bottom Navigation - Hidden on Desktop
   ======================================== */
.trix-mobile-nav {
    display: none;
}

/* ========================================
   Mobile Styles (max-width: 600px)
   ======================================== */
@media (max-width: 600px) {
    /* Mobile Top Bar */
    .trix-mobile-top-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: var(--trix-white);
        border-bottom: 1px solid var(--trix-gray-200);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1001;
    }
    
    .trix-mobile-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--trix-primary);
        color: var(--trix-white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 600;
        flex-shrink: 0;
        cursor: pointer;
    }
    
    .trix-mobile-search {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--trix-gray-100);
        border-radius: 4px;
        padding: 8px 12px;
        height: 36px;
    }
    
    .trix-mobile-search svg {
        width: 16px;
        height: 16px;
        color: var(--trix-text-tertiary);
        flex-shrink: 0;
    }
    
    .trix-mobile-search input {
        flex: 1;
        border: none;
        background: transparent;
        outline: none;
        font-size: 14px;
        color: var(--trix-text-primary);
    }
    
    .trix-mobile-search input::placeholder {
        color: var(--trix-text-tertiary);
    }
    
    .trix-mobile-compose {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--trix-primary);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--trix-white);
    }
    
    .trix-mobile-compose svg {
        width: 18px;
        height: 18px;
    }
    
    /* Mobile Bottom Navigation */
    .trix-mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--trix-white);
        border-top: 1px solid var(--trix-gray-200);
        padding: 4px 0;
        padding-bottom: env(safe-area-inset-bottom, 4px);
        z-index: 1000;
        justify-content: space-around;
        align-items: center;
    }
    
    .trix-mobile-nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 8px 16px;
        border: none;
        background: transparent;
        color: var(--trix-text-secondary);
        font-size: 10px;
        font-weight: 400;
        cursor: pointer;
        transition: var(--trix-transition);
        flex: 1;
    }
    
    .trix-mobile-nav-btn svg {
        width: 24px;
        height: 24px;
    }
    
    .trix-mobile-nav-btn:active {
        opacity: 0.7;
    }
    
    .trix-mobile-nav-btn.active {
        color: var(--trix-primary);
    }
    
    /* Main App adjustments for mobile */
    .trix-main-app {
        display: block;
        padding-top: 52px;
        padding-bottom: 60px;
        padding-left: 0;
        padding-right: 0;
        min-height: 100vh;
    }
    
    .trix-app-body {
        display: block;
    }
    
    /* Hide desktop header and sidebars on mobile */
    .trix-header {
        display: none !important;
    }
    
    .trix-sidebar,
    .trix-right-sidebar {
        display: none !important;
    }
    
    /* Main content full width */
    .trix-main-content {
        display: block;
        width: 100%;
        padding: 0;
    }
    
    /* Folder tabs mobile */
    .trix-folder-tabs {
        padding: 8px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        border-bottom: none;
        background: var(--trix-white);
    }
    
    .trix-folder-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .trix-folder-tab {
        padding: 6px 12px;
        font-size: 13px;
        white-space: nowrap;
    }
    
    /* Email grid mobile */
    .trix-email-grid {
        padding: 0;
    }
    
    /* Email cards mobile - no gaps, border separators */
    .trix-email-card {
        padding: 12px 16px;
        border-radius: 0;
        margin: 0;
        border-bottom: 1px solid var(--trix-gray-200);
        box-shadow: none;
    }
    
    .trix-email-card:hover {
        box-shadow: none;
    }
    
    .trix-email-avatar {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    
    /* Mobile view states */
    body.mobile-view-flagged .trix-sidebar {
        display: flex !important;
        position: fixed;
        inset: 52px 0 56px 0;
        width: 100%;
        background: var(--trix-bg);
        z-index: 999;
        padding: 16px;
        overflow-y: auto;
    }
    
    body.mobile-view-flagged .trix-main-content {
        display: none !important;
    }
    
    body.mobile-view-calendar .trix-right-sidebar {
        display: flex !important;
        position: fixed;
        inset: 52px 0 56px 0;
        width: 100%;
        background: var(--trix-bg);
        z-index: 999;
        padding: 16px;
        overflow-y: auto;
    }
    
    body.mobile-view-calendar .trix-main-content {
        display: none !important;
    }
}