/* ============================================
   ZipChats.online — Mobile Specific Styles
   ============================================ */

/* Mobile Header Spacing (Fixing Audit Issue) */
.app-header {
    gap: 12px !important;
    padding: 0 16px !important;
}

.header-icon-btn, .user-profile-icon {
    flex-shrink: 0;
}

/* Mobile Sidebar & Chat Panel */
#sidebar {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    transform: translateX(0);
}

#chat-panel {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    background: var(--bg-primary);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#chat-panel.active { transform: translateX(0); }

/* Bottom Nav */
.nav-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: var(--nav-height);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 300;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-subtle);
}

.sidebar-content { padding-bottom: 80px; }

/* Grid Optimizations */
.user-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    padding: 12px;
}

/* Landing Adjustments */
.landing-container { padding: 40px 15px; }
.logo { font-size: 3rem; }
.auth-box { padding: 30px 20px; }

/* Filter Alignment Fixes */
.inline-fields {
    flex-direction: row;
    align-items: center;
}

/* Chat Input Mobile Buffer */
.chat-input-bar {
    padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
}