@media (max-width: 768px) {
            .mobile-only { display: block; }
            .desktop-only { display: none; }
            .mobile-only-flex { display: flex; }
            .desktop-only-flex { display: none; }
            .mobile-only-inline { display: inline; }
            .desktop-only-inline { display: none; }
        }

        @media (max-width: 768px) {
            .error-banner {
                top: 80px; /* Adjusted for mobile fixed header */
            }

            .error-banner-content {
                padding: 12px 16px;
                gap: 10px;
            }

            .error-banner-icon {
                font-size: 20px;
            }

            .error-banner-title {
                font-size: 14px;
            }

            .error-banner-message {
                font-size: 13px;
            }
        }


        @media (max-width: 768px) {
            .welcome-heading {
                font-size: 36px;
            }

            /* Mobile: Tighter spacing for placeholder */
            .animated-placeholder {
                right: 95px; /* Tighter on tablets */
                font-size: 14px;
                left: 44px; /* Increased from 30px for better spacing from search icon */
            }

            .chat-messages {
                padding: 100px 16px 120px 16px; /* Top padding to clear fixed header, bottom for input */
            }

            .landing-container {
                padding: 20px;
            }

            /* Mobile header optimization */
            .header {
                position: fixed; /* Fix header to top on mobile */
                top: 0;
                left: 0;
                right: 0;
                z-index: 200; /* Above other content */
                padding: 12px 16px; /* Reduced from 16px 24px */
            }

            /* Add top padding to content to prevent hiding behind fixed header */
            /* FIX: v4.6.0 - Reduced from 80px to 60px (actual header ~50px + 10px buffer) */
            body {
                padding-top: 60px;
            }

            .landing-container {
                justify-content: flex-start;
                padding-top: 15vh; /* Position from top to prevent hero scroll overshoot */
            }

            .header-left {
                gap: 12px; /* Reduced from 16px */
            }

            .brand-name {
                font-size: 16px; /* Reduced from 18px */
            }

            .brand-tagline {
                font-size: 11px; /* Reduced from 12px */
            }

            .new-conversation-btn {
                padding: 6px 12px; /* Reduced from 8px 16px */
                font-size: 13px; /* Reduced from 14px */
                gap: 6px; /* Reduced from 8px */
            }

            .new-conversation-btn svg {
                width: 14px; /* Reduced from 16px */
                height: 14px;
            }

            .help-link-btn {
                padding: 6px 10px;
                font-size: 13px;
                gap: 4px;
            }

            .help-link-btn svg {
                width: 14px;
                height: 14px;
            }

            .header-orb-logo {
                width: 48px; /* Reduced from 64px for tablets */
                height: 48px;
            }

            /* Mobile message layout optimization */
            .message {
                padding: 8px 8px; /* Reduced left/right from 16px */
                gap: 8px; /* Reduced from 12px */
            }

            .message-avatar {
                width: 40px; /* Reduced from 50px */
                height: 40px;
            }

            .message.user .message-avatar {
                font-size: 16px; /* Reduced from 18px */
            }

            /* Fix chat input to bottom of screen on mobile */
            .chat-input-container {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 100;
                padding: 12px 16px; /* Reduced padding for mobile */
                padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); /* Account for iOS safe area */
                overflow: visible; /* Allow dropdown to extend outside container */
                transform: translateZ(0); /* Force GPU layer to prevent disappearing bug */
            }

            /* Add bottom padding to messages to prevent hiding behind fixed input */
            .chat-messages {
                padding-bottom: 120px; /* Increased from 20px to account for fixed input */
            }

            /* Prevent iOS auto-zoom on input focus */
            .chat-input-field {
                font-size: 16px; /* Minimum 16px prevents mobile browser auto-zoom */
                padding: 12px 14px; /* Slightly reduced padding */
            }

            .chat-input-field::placeholder {
                font-size: 12px; /* Even smaller for placeholder */
            }

            /* Make voice orb smaller on tablet to fit better */
            .ultra-fabric-orb {
                width: 40px; /* Reduced from 44px */
                height: 40px;
            }

            /* Match send button size to voice orb on tablet */
            .chat-send-btn {
                width: 40px;
                height: 40px;
            }

            /* Scale version number smaller on tablet */
            .brand-version {
                font-size: 8px;
                margin-top: 1px;
            }

            /* Reduce gap in search bar on tablet */
            .search-inner {
                gap: 10px; /* Reduced from 12px */
            }
        }