#channels .connection-section {
    position: relative !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* Only apply fullscreen to the sidebar containers, not their internal sections */
@media (max-width: 768px) {
    .mobile-device #channels.active {
        width: 85vw !important;
        max-width: 400px !important;
        min-width: 280px !important;
        transform: translateX(0) !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
    }

    .mobile-device #peopleSidebar.active {
        width: 85vw !important;
        max-width: 400px !important;
        min-width: 280px !important;
        transform: translateX(0) !important;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
    }

    /* Ensure server connection form stays properly sized */
    .mobile-device #channels.active .connection-section {
        width: auto !important;
        max-width: none !important;
    }

    .mobile-device #channels.active .form-group input {
        width: 100% !important;
        max-width: none !important;
    }
}

/* Super narrow screens (280px and below) */
@media (max-width: 280px) {
    .super-narrow .mobile-header {
        padding: 4px 8px;
        min-height: 44px;
    }
    
    .super-narrow .mobile-title {
        font-size: 0.9rem;
    }
    
    .super-narrow .mobile-menu-button {
        padding: 6px;
        min-width: 36px;
        min-height: 36px;
    }
    
    .super-narrow .tab {
        padding: 4px 8px;
        font-size: 0.7rem;
        max-width: 80px;
    }
    
    .super-narrow .message-sender {
        min-width: 50px;
        font-size: 0.7rem;
    }
    
    .super-narrow .message-content {
        font-size: 0.7rem;
    }
    
    .super-narrow .composer {
        padding: 8px;
        gap: 6px;
    }
    
    .super-narrow .composer-input input {
        font-size: 0.8rem;
        padding: 8px 0;
    }
    
    .super-narrow button {
        padding: 6px 8px;
        font-size: 0.7rem;
    }
    
    .super-narrow .form-group input {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    /* Adjust sidebar width for super narrow */
    .super-narrow #channels.active,
    .super-narrow #peopleSidebar.active {
        width: 95vw !important;
        min-width: 250px !important;
    }
}

/* Narrow screens (320px and below) */
@media (max-width: 320px) {
    .narrow-screen .mobile-header {
        padding: 6px 12px;
    }
    
    .narrow-screen .tab {
        padding: 6px 10px;
        font-size: 0.75rem;
        max-width: 100px;
    }
    
    .narrow-screen .messages {
        padding: 6px 8px;
        font-size: 0.75rem;
    }
    
    .narrow-screen .message-sender {
        min-width: 60px;
        font-size: 0.75rem;
    }
    
    .narrow-screen .composer {
        padding: 10px;
        gap: 8px;
    }
    
    .narrow-screen .composer-input input {
        font-size: 0.85rem;
    }
    
    .narrow-screen #channels.active,
    .narrow-screen #peopleSidebar.active {
        width: 90vw !important;
        min-width: 260px !important;
    }
    
    .narrow-screen .channel-item,
    .narrow-screen .people-item {
        padding: 10px 8px;
        min-height: 44px;
    }
    
    .narrow-screen .form-group {
        margin-bottom: 8px;
    }
    
    .narrow-screen .button-group {
        gap: 4px;
    }
}

/* Mobile optimizations */
.mobile-device {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.mobile-device .messages,
.mobile-device .channel-list,
.mobile-device .people-list-container {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

.touch-active {
    background-color: #4A4A4A !important;
    transition: background-color 0.1s ease;
}

/* Improved tap targets */
.mobile-device button,
.mobile-device .channel-item,
.mobile-device .people-item,
.mobile-device .tab {
    min-height: 44px;
    min-width: 44px;
}

/* Hide resize handles on mobile */
.mobile-device .sidebar-resize-handle {
    display: none;
}

/* Compact forms for narrow screens */
.narrow-screen .connection-section,
.narrow-screen .channel-section,
.narrow-screen .people-section {
    padding: 12px;
}

.narrow-screen .section-title {
    font-size: 0.7rem;
    margin-bottom: 8px;
}

/* Stack buttons vertically on very narrow screens */
.super-narrow .button-group {
    flex-direction: column;
}

.super-narrow .button-group button {
    flex: none;
}

/* Adjust message layout for narrow screens */
.super-narrow .message-line {
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
}

.super-narrow .message-sender {
    text-align: left;
    padding-right: 0;
    min-width: auto;
}

/* Compact composer for narrow screens */
.super-narrow .composer {
    grid-template-columns: 1fr;
}

.super-narrow .composer-input {
    margin-bottom: 4px;
}