/**
 * CRITICAL MOBILE FIXES - HEADER & MENU VISIBILITY
 * Addresses major space usage and visibility issues
 */

/* ===========================================
   MOBILE HEADER OPTIMIZATION
   =========================================== */

@media (max-width: 768px) {
    /* Header container compact */
    .header-section {
        padding: 0.25rem 0 !important;
        margin: 0 !important;
        min-height: auto !important;
        position: relative !important;
    }
    
    /* Customer nav positioned top-right */
    .customer-nav {
        position: absolute !important;
        top: 0.5rem !important;
        right: 0.5rem !important;
        z-index: 20 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    /* Make customer menu toggle smaller */
    .customer-menu-toggle {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
        min-height: 32px !important;
    }
    
    /* Header content layout for mobile */
    .text-center {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.25rem 0.5rem !important;
        margin-bottom: 0.25rem !important;
        text-align: left !important;
    }
    
    /* Logo left-justified and smaller */
    .text-center img {
        max-width: 80px !important;
        max-height: 40px !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        order: 1 !important;
    }
    
    /* Remove the app title from mobile header */
    .text-center + h5 {
        display: none !important;
    }
    
    /* Listening indicator compact */
    #listening-indicator {
        margin-top: 0.25rem !important;
        font-size: 0.75rem !important;
        padding: 0.25rem !important;
    }
    
    #listening-indicator .spinner-border-sm {
        width: 0.75rem !important;
        height: 0.75rem !important;
    }
    
    /* Hide column control on mobile */
    #column-control-container {
        display: none !important;
    }
    
    /* ===========================================
       FIX CATEGORY MENU VISIBILITY ISSUES
       =========================================== */
    
    /* CRITICAL: Category accordion must be hidden when closed */
    .tree-menu-accordion {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        transition: all 0.3s ease !important;
    }
    
    /* Only show when explicitly opened */
    .tree-menu-accordion.open {
        display: block !important;
        height: auto !important;
        max-height: 35vh !important;
        overflow-y: auto !important;
        opacity: 1 !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Compact menu button */
    .tree-menu-button {
        padding: 0.125rem 0.5rem !important;
        font-size: 0.7rem !important;
        min-height: 19px !important;
        height: 19px !important;
        line-height: 1.1 !important;
        margin: 0 0 4px 0 !important;
        width: 100% !important;
    }
    
    /* REMOVE search input from mobile - not needed */
    .tree-menu-accordion .tree-menu-search {
        display: none !important;
    }
    
    /* Scrollable category content */
    .tree-menu-accordion .tree-menu-content {
        max-height: 30vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0.25rem !important;
    }
    
    /* Compact category items */
    .tree-category-link {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
    }
    
    /* ===========================================
       OPTIMIZE REMAINING SPACE
       =========================================== */
    
    /* Main content uses all available space */
    .chat-column {
        padding: 0.125rem 0.5rem 0 0.5rem !important; /* Remove bottom padding completely */
        margin: 0 !important;
        height: auto !important;
    }
    
    /* Main content container */
    .main-content {
        padding: 0 !important;
        margin: 0 !important;
        height: calc(100vh - 50px) !important; /* Account for header */
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    /* Chat form section with minimal gaps */
    .chat-form-section {
        margin: 0 !important;
        padding: 0.125rem 0.5rem !important;
    }
    
    /* Chat messages more compact */
    .chat-message {
        margin: 0.25rem 0 !important;
        padding: 0.5rem !important;
    }
    
    /* Chat input area - minimal spacing */
    .chat-input-container {
        padding: 0.125rem 0.5rem !important;
        margin: 0 !important;
        position: relative !important;
        background: white;
        border-top: 1px solid #ddd;
        z-index: 10;
    }
    
    /* Compact buttons */
    .chat-input-container button {
        padding: 0.125rem 0.375rem !important;
        font-size: 0.65rem !important;
        min-height: 24px !important;
        height: 24px !important;
    }
    
    /* ===========================================
       GENERAL SPACE OPTIMIZATION
       =========================================== */
    
    /* Remove all excessive padding */
    body {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .container,
    .main-container,
    .content-container {
        padding: 0 !important;
        margin: 0 !important;
        height: 100% !important;
    }
    
    /* Hide any unnecessary elements */
    .spacer,
    .padding-section,
    .margin-section,
    .desktop-only {
        display: none !important;
    }
    
    /* Ensure scrolling works */
    html, body {
        height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ===========================================
   EXTRA SMALL SCREENS (iPhone SE)
   =========================================== */
@media (max-width: 480px) {
    .logo-section img {
        max-height: 40px !important;
    }
    
    .page-title, h1 {
        font-size: 1rem !important;
    }
    
    .tree-menu-accordion.open {
        max-height: 30vh !important;
    }
    
    .tree-category-link {
        padding: 0.3rem 0.4rem !important;
        font-size: 0.8rem !important;
    }
}

/* ===========================================
   CHAT INPUT AND BUTTON OPTIMIZATIONS  
   =========================================== */

@media (max-width: 768px) {
    /* Make all buttons half their current height */
    .btn,
    .chat-form-section .btn,
    .tree-menu-button,
    #new-conversation-btn,
    #realtime-voice-start-btn,
    #realtime-voice-stop-btn,
    button[type="submit"] {
        padding: 0.125rem 0.375rem !important;
        font-size: 0.7rem !important;
        min-height: 24px !important;
        height: 24px !important;
        line-height: 1.1 !important;
    }
    
    /* Browse Categories button specifically - half height for mobile */
    .tree-menu-button {
        padding: 0.125rem 0.5rem !important;
        font-size: 0.7rem !important;
        min-height: 19px !important;
        height: 19px !important;
        line-height: 1.1 !important;
    }
    
    /* Chat control buttons - half height */
    .chat-form-section .btn {
        padding: 0.125rem 0.375rem !important;
        font-size: 0.65rem !important;
        min-height: 24px !important;
        height: 24px !important;
        line-height: 1.1 !important;
    }
    
    /* Chat control row - compact spacing */
    .chat-form-section .d-flex {
        gap: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Chat input field - single row only */
    #chat-input {
        resize: none !important;
        min-height: 28px !important;
        height: 28px !important;
        font-size: 0.875rem !important;
        padding: 0.25rem 0.5rem !important;
        line-height: 1.2 !important;
        overflow-y: hidden !important;
    }
    
    /* Voice controls spacing */
    .chat-form-section .d-flex[style*="gap"] {
        gap: 0.25rem !important;
    }
    
    /* Button groups compact */
    .chat-form-section .d-flex.align-items-center {
        gap: 0.25rem !important;
    }
}

/* ===========================================
   MOBILE-SPECIFIC JAVASCRIPT FIXES
   =========================================== */

/* Add JavaScript execution for mobile-specific changes */
@media (max-width: 768px) {
    /* This CSS will force the chat input to behave as single row */
    #chat-input {
        height: 28px !important;
        max-height: 28px !important;
        overflow: hidden !important;
    }
}

/* ===========================================
   CHAT PANEL OPTIMIZATIONS
   =========================================== */

@media (max-width: 768px) {
    /* Optimize chat panel height for mobile - 40% bigger */
    #chat-panel {
        height: 17vh !important;
        min-height: 85px !important;
        max-height: 21vh !important;
        margin-bottom: 2px !important; /* Minimal gap to products */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Compact chat form */
    .chat-form-section {
        margin-bottom: 4px !important;
    }
    
    .chat-form-section .d-flex {
        margin-bottom: 2px !important;
    }
    
    /* Add small spacing for button rows on mobile */
    .chat-form-section .d-flex.justify-content-between {
        margin-bottom: 4px !important;
        padding: 2px 0 !important;
    }
    
    /* Compact buttons */
    .chat-form-section .btn {
        padding: 0.125rem 0.375rem !important;
        font-size: 0.65rem !important;
        min-height: 24px !important;
        height: 24px !important;
    }
    
    /* Compact textarea */
    #chat-input {
        font-size: 0.875rem !important;
        padding: 0.25rem 0.5rem !important;
        min-height: 28px !important;
        height: 28px !important;
    }
}

/* ===========================================
   TREE CATEGORY MENU MOBILE FIXES
   =========================================== */

@media (max-width: 768px) {
    /* Compact category menu button */
    .tree-menu-button {
        padding: 0.125rem 0.5rem !important;
        font-size: 0.7rem !important;
        min-height: 19px !important;
        height: 19px !important;
        line-height: 1.1 !important;
        margin-bottom: 4px !important;
        margin-top: 0 !important;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
    }
    
    .tree-menu-button .icon {
        font-size: 0.9rem !important;
        margin-right: 4px !important;
    }
    
    .tree-menu-button .toggle-icon {
        margin-left: 4px !important;
        font-size: 0.8rem !important;
    }
    
    /* Accordion optimization */
    .tree-menu-accordion {
        max-height: 25vh !important;
        margin-bottom: 8px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
    }
    
    .tree-menu-accordion.open {
        background: white !important;
        border: 1px solid #e5e7eb !important;
    }
    
    /* Category content scrolling */
    .tree-menu-content {
        max-height: 20vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 4px !important;
    }
    
    /* Category search */
    .tree-menu-search {
        padding: 6px 8px !important;
        border-bottom: 1px solid #e5e7eb !important;
        background: #f9fafb !important;
    }
    
    .tree-search-input {
        font-size: 0.85rem !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
        border: 1px solid #d1d5db !important;
    }
    
    /* Individual category items */
    .tree-category-link {
        padding: 6px 8px !important;
        font-size: 0.85rem !important;
        border-radius: 4px !important;
        margin: 1px 0 !important;
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        text-align: left !important;
        background: transparent !important;
        border: none !important;
        width: 100% !important;
        color: #374151 !important;
        transition: all 0.15s ease !important;
    }
    
    .tree-category-link:hover,
    .tree-category-link:focus {
        background: #f3f4f6 !important;
        color: #2563eb !important;
    }
    
    .tree-category-link.has-children {
        font-weight: 500 !important;
    }
    
    /* Expand icons */
    .tree-expand-icon {
        font-size: 0.75rem !important;
        margin-right: 6px !important;
        min-width: 14px !important;
        color: #6b7280 !important;
    }
    
    .tree-expand-icon.clickable:hover {
        color: #2563eb !important;
    }
    
    /* Nested categories */
    .tree-nested-categories {
        padding-left: 16px !important;
        border-left: 1px solid #e5e7eb !important;
        margin-left: 8px !important;
    }
    
    .tree-nested-categories.expanded {
        display: block !important;
    }
}

/* ===========================================
   PRODUCTS AREA OPTIMIZATION
   =========================================== */

@media (max-width: 768px) {
    /* Main layout optimizations */
    .main-layout {
        flex-direction: column !important;
        gap: 0 !important;
        height: calc(100vh - 50px) !important; /* Account for header */
        display: flex !important;
        overflow: hidden !important;
    }
    
    .chat-column {
        flex: none !important;
        margin: 0 !important;
        padding: 0 0.5rem !important;
    }
    
    .products-column {
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #products-container {
        flex: 1 !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 4px 8px 4px !important; /* Minimal bottom padding for scroll space */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: #f8f9fa !important;
    }
    
    #products-row {
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Compact product cards */
    .product-card {
        margin: 2px 0 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        background: white !important;
        overflow: hidden !important;
    }
    
    .product-card .card-body {
        padding: 8px !important;
    }
    
    .product-card .card-title {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
    }
    
    .product-card .price {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
    }
    
    .product-card .btn {
        padding: 4px 8px !important;
        font-size: 0.8rem !important;
    }
}

/* ===========================================
   MINI-CART MOBILE OPTIMIZATION
   =========================================== */

@media (max-width: 768px) {
    #mini-cart {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        border-radius: 12px 12px 0 0 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
        z-index: 1040 !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
    }
    
    #mini-cart .card-body {
        padding: 8px 12px !important;
    }
    
    #mini-cart .cart-header {
        font-size: 0.9rem !important;
        margin-bottom: 4px !important;
    }
    
    #mini-cart .cart-item {
        padding: 4px 0 !important;
        font-size: 0.8rem !important;
    }
    
    #mini-cart .checkout-btn {
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
        width: 100% !important;
        margin-top: 4px !important;
    }
}

/* ===========================================
   TOUCH IMPROVEMENTS
   =========================================== */

@media (max-width: 768px) {
    /* Ensure all touch targets are at least 44px */
    .tree-category-link,
    .btn,
    .product-card .btn {
        min-height: 44px !important;
        touch-action: manipulation !important;
    }
    
    /* Browse Categories button exception - compact height */
    .tree-menu-button {
        min-height: 19px !important;
        height: 19px !important;
        touch-action: manipulation !important;
    }
    
    /* Improve scrolling performance */
    .tree-menu-content,
    #chat-panel,
    #products-container,
    #mini-cart {
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
    }
    
    /* Prevent text selection on interactive elements */
    .tree-category-link,
    .tree-menu-button,
    .btn {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
}

/* ===========================================
   VERY SMALL SCREENS (iPhone SE)
   =========================================== */

@media (max-width: 375px) {
    /* Even more compact header */
    .text-center img {
        max-width: 60px !important;
    }
    
    .text-center h5 {
        font-size: 0.9rem !important;
    }
    
    /* Smaller category menu */
    .tree-menu-accordion {
        max-height: 20vh !important;
    }
    
    .tree-menu-content {
        max-height: 15vh !important;
    }
    
    /* More compact chat - 40% bigger than before */
    #chat-panel {
        height: 14vh !important;
        min-height: 70px !important;
        max-height: 17vh !important;
    }
    
    /* Compact customer nav */
    .customer-nav .welcome-box,
    .customer-nav .gift-certificates-container {
        font-size: 0.7rem !important;
        padding: 2px 4px !important;
    }
}

/* ===========================================
   MOBILE HEADER REFACTOR - NEW LAYOUT
   =========================================== */

@media (max-width: 768px) {
    /* Hide desktop elements on mobile */
    .desktop-nav,
    .desktop-header {
        display: none !important;
    }
    
    /* Mobile header layout */
    .mobile-header {
        display: block !important;
        padding: 0.25rem 0.5rem 0.125rem 0.5rem !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-header-content {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* Mobile logo - left justified */
    .mobile-logo {
        flex: 0 0 auto !important;
    }
    
    .mobile-logo img {
        max-width: 80px !important;
        max-height: 40px !important;
        height: auto !important;
        width: auto !important;
    }
    
    /* Mobile login - right justified */
    .mobile-login {
        flex: 0 0 auto !important;
    }
    
    /* Mobile customer menu styling */
    .mobile-customer-menu .mobile-login-link {
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        padding: 0.25rem 0.5rem !important;
        color: #333 !important;
        text-decoration: none !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        display: inline-block !important;
        min-height: 32px !important;
        line-height: 1.5 !important;
        transition: all 0.2s ease !important;
    }
    
    .mobile-customer-menu .mobile-login-link:hover {
        background: #f8f9fa !important;
        border-color: #bbb !important;
        text-decoration: none !important;
        color: #333 !important;
    }
    
    /* Mobile login form (collapsible) */
    .mobile-login-form {
        position: fixed !important; /* Changed to fixed for better stacking */
        top: 60px !important; /* Position below header */
        right: 10px !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important; /* Stronger shadow */
        padding: 0.75rem !important;
        margin: 0 !important;
        z-index: 999999 !important; /* Even higher z-index */
        min-width: 200px !important;
        max-width: 280px !important;
    }
    
    .mobile-login-inputs {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .mobile-login-inputs input {
        padding: 0.375rem 0.5rem !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        font-size: 0.75rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mobile-login-buttons {
        display: flex !important;
        gap: 0.5rem !important;
        align-items: center !important;
    }
    
    .mobile-login-btn {
        background: #007bff !important;
        color: #fff !important;
        border: none !important;
        border-radius: 4px !important;
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
        cursor: pointer !important;
        flex: 1 !important;
    }
    
    .mobile-signup-link {
        color: #6c757d !important;
        text-decoration: none !important;
        font-size: 0.7rem !important;
        white-space: nowrap !important;
    }
    
    .mobile-login-status {
        margin-top: 0.5rem !important;
        padding: 0.25rem 0.5rem !important;
        border-radius: 4px !important;
        font-size: 0.7rem !important;
        text-align: center !important;
    }
}

/* Desktop layout - hide mobile elements */
@media (min-width: 769px) {
    .mobile-header {
        display: none !important;
    }
    
    .desktop-nav,
    .desktop-header {
        display: block !important;
    }
}

/* ===========================================
   COLLAPSIBLE CHAT FOR MOBILE/TABLET
   =========================================== */

@media (max-width: 1024px) {
    /* Chat panel collapsed state */
    #chat-panel.chat-collapsed {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        overflow: hidden !important;
        transition: height 0.3s ease !important;
        position: relative !important;
    }
    
    /* Hide all chat content when collapsed except the indicator */
    #chat-panel.chat-collapsed > *:not(.chat-collapsed-indicator) {
        display: none !important;
    }
    
    /* Collapsed indicator button - hidden by default */
    .chat-collapsed-indicator {
        position: absolute !important;
        top: 0 !important;
        left: 4px !important;
        right: 4px !important;
        height: 30px !important;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
        cursor: pointer !important;
        display: none !important; /* Hidden by default */
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        z-index: 1 !important; /* Very low z-index */
        transition: all 0.2s ease !important;
        text-align: center !important;
    }
    
    /* Show button only when chat is collapsed */
    #chat-panel.chat-collapsed .chat-collapsed-indicator {
        display: flex !important;
    }
    
    /* Button hover effect */
    .chat-collapsed-indicator:hover {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
        transform: translateY(-1px) !important;
    }
    
    /* Chat icon in button */
    .chat-collapsed-indicator .chat-icon {
        margin-right: 6px !important;
        font-size: 1rem !important;
    }
    
    /* Smooth transitions for chat panel */
    #chat-panel {
        transition: height 0.3s ease !important;
    }
    
    /* Products container smooth scrolling */
    #products-container {
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Tablet specific adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Force tablet into single column mobile-like layout */
    .main-layout {
        flex-direction: column !important;
        gap: 0 !important;
        height: calc(100vh - 50px) !important;
        display: flex !important;
        overflow: hidden !important;
        align-items: stretch !important;
    }
    
    .chat-column {
        flex: none !important;
        width: 100% !important;
        order: 1 !important;
        margin: 0 !important;
        padding: 0 0.5rem !important;
    }
    
    .products-column {
        flex: 1 !important;
        width: 100% !important;
        order: 2 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Remove chat panel margin and ensure no gap */
    #chat-panel {
        margin: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Chat form section with no gap */
    .chat-form-section {
        margin: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Products container - center content and eliminate gaps */
    #products-container {
        padding: 0 !important;
        margin: 0 !important;
        flex: 1 !important;
        height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: #f8f9fa !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
    }
    
    /* Products row - centered with proper spacing */
    #products-row {
        gap: 12px !important;
        margin: 0 !important;
        padding: 12px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 900px !important; /* Limit width for better tablet layout */
        box-sizing: border-box !important;
    }
    
    /* Individual product cards */
    .product-card {
        margin: 0 !important;
        flex: 0 0 calc(50% - 6px) !important; /* Two columns on tablet */
        max-width: calc(50% - 6px) !important;
    }
    
    /* Collapsible chat button for tablets */
    .chat-collapsed-indicator {
        height: 35px !important;
        font-size: 0.9rem !important;
    }
    
    #chat-panel.chat-collapsed {
        height: 35px !important;
        min-height: 35px !important;
        max-height: 35px !important;
    }
    
    /* Override any other conflicting margins/padding */
    .main-layout > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .chat-column > * {
        margin-bottom: 0 !important;
    }
    
    .chat-column > *:last-child {
        margin-bottom: 0 !important;
    }
}

/* ===========================================
   TABLET LAYOUT OVERRIDES - FORCE MOBILE BEHAVIOR
   =========================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    /* Override any desktop styles that might interfere */
    .main-layout {
        flex-direction: column !important;
        gap: 0 !important;
        align-items: stretch !important;
        height: calc(100vh - 60px) !important;
    }
    
    /* Force chat column to behave like mobile */
    .chat-column {
        width: 100% !important;
        order: 1 !important;
        flex-shrink: 0 !important;
        padding: 0 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }
    
    /* Force products column to behave like mobile */
    .products-column {
        width: 100% !important;
        order: 2 !important;
        flex: 1 !important;
        min-height: 0 !important;
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Ensure chat panel has no conflicting margins */
    #chat-panel {
        height: 20vh !important;
        min-height: 120px !important;
        max-height: 25vh !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    /* Ensure products container fills remaining space */
    #products-container {
        margin: 0 !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
        height: 100% !important;
        flex: 1 !important;
    }
    
    /* Override any desktop column settings */
    #products-row.columns-1,
    #products-row.columns-2,
    #products-row.columns-3,
    #products-row.columns-4,
    #products-row.columns-5 {
        max-width: none !important;
        margin: 0 !important;
        padding: 12px !important;
        justify-content: center !important;
    }
    
    /* Ensure proper spacing between chat and products */
    .chat-form-section {
        margin-bottom: 6px !important;
        padding-bottom: 4px !important;
    }
    
    /* Add breathing room for Browse Categories button */
    .tree-menu-button {
        margin-bottom: 8px !important;
        margin-top: 4px !important;
    }
    
    /* Add spacing for chat control buttons (New Chat, Voice, Send) */
    .chat-form-section .d-flex.justify-content-between {
        margin-bottom: 6px !important;
        padding: 4px 0 !important;
    }
    
    /* Chat input form spacing */
    #chat-form {
        margin-bottom: 4px !important;
    }
    
    /* Tablet-specific chat input - match chat window font and proper size */
    #chat-input {
        font-size: 0.875rem !important;
        padding: 0.25rem 0.5rem !important;
        min-height: 24px !important;
        height: 24px !important;
        line-height: 1.2 !important;
        font-family: inherit !important; /* Use same font as chat messages */
    }
    
    /* Hide column selector on tablets - not needed with fixed 2-column layout */
    #column-control-container {
        display: none !important;
    }
    
    /* Remove any Bootstrap or other framework margins */
    .mb-3,
    .mb-2,
    .mb-1 {
        margin-bottom: 0 !important;
    }
    
    /* Force container to use full height */
    .container,
    .main-container,
    .content-container {
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}