/**
 The file is for css style that works for index/chat_tool/image_generator
 */
    @media (max-width: 800px) {

        .header-container{
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }

        .nav-tabs {
            display: inline-flex;
            flex-wrap: nowrap; /* Prevents wrapping to multiple rows */
        }

        .nav-item {
            flex-shrink: 0; /* Prevents tabs from shrinking when space is limited */
        }

        .nav-link {
            white-space: nowrap; /* Prevents text from wrapping */
        }

        .card-footer {
            width: 95% !important;
        }

        .hide-on-mobile {
            display: none !important;
        }

        .chatbot-analytics{
            display: none !important;
        }
        .dropdown-item.mobile-only {
            display: block !important;
        }
        .navbar-nav .nav-item.dropdown .nav-link {
          display: flex;
          align-items: center;
          white-space: nowrap; /* prevent wrapping */
          max-width: none;     /* remove Bootstrap’s width limit */
          overflow: visible;   /* ensure text not cut off */
        }
        #editTab.nav-tabs {
            display: flex;
            flex-wrap: wrap;
            overflow: visible;
        }
    }


    /* med screen devices (ie. iPhone 12 and 14pm) */
    @media (min-width: 300px) and (max-width: 500px) {
        .direct-chat-msg {
            width: 55%;
        }
    }

    /* Bigger screens (ie. iPad or desktop) */
    @media (min-width: 700px) {
        .direct-chat-msg {
            width: 100%;
        }
        .header-container{
            font-size: 12px;
        }


    }
    /* smaller screens, older devices(ie. iphone se) */
    @media (max-width: 390px) {
        .direct-chat-msg {
            width: 50%;
        }
    }
     /* galaxy Z Flod */
    @media (min-width: 340px) and (max-width: 370px) {
        .direct-chat-msg {
            width: 48%;
        }
        body, .direct-chat-messages {
            font-size: 15px;
        }
    }