.chat-list,
        .chat-window-wrapper {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        #chatListItems {
            flex-grow: 1;
            overflow-y: auto;
            min-height: 500px;
        }

        .message {
            font-size: .8rem;
            padding: 10px 15px;
            border-radius: 12px;
            max-width: 70%;
            margin-bottom: 12px;
        }

        .incoming {
            background: #e7f3ff;
            margin-right: auto;
        }

        .outgoing {
            background: #d4fcd7;
            margin-left: auto;
        }

        .chat-window {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        #chatBody {
            flex: 1 1 auto;
            /* <-- only this part scrolls */
            overflow-y: auto;
            padding: 1rem;
            background: #f5f5f5;
        }

        .chat-item {
            border-bottom: 1px solid #00000013;
            margin: 5px 20px;
            transition: .2s;
            cursor: pointer;
        }


        /* Search Bar */
        .search-container {
            padding: 12px 16px;
            background: white;
        }

        .search-input {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 10px 14px;
            width: 100%;
            font-size: .95rem;
        }

        .search-input:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 2px rgba(0, 123, 255, .2);
        }

        .chat-footer {
            background-color: #f8f9fa;
        }

        .chat-input-wrapper {
            position: relative;
        }

        #chatInput {
            width: 100%;
            border-radius: 20px;
            padding: 10px 15px;
            font-size: 15px;
        }

        .chat-icons i {
            cursor: pointer;
            transition: .2s;
            font-size: 1rem;
        }

        .chat-icons i:hover {
            color: #0d6efd;
        }

        #actionIconWrapper i {
            margin-left: 10px;
        }

        .footer-icons i {
            font-size: 1rem !important;
        }

        .add-new-dropdwon {
            min-width: 120px;
            font-size: 13px;
            padding: 4px 0;
        }

        .add-new-dropdwon .dropdown-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 8px;
        }

        .add-new-dropdwon .dropdown-item i {
            font-size: 14px;
            color: #666;
        }

        .add-new-dropdwon .dropdown-item:hover {
            background-color: #f5f5f5;
        }

        /* Avatar colors */
        .avatar-yellow {
            background: #FFC107;
            color: #000;
        }

        .avatar-teal {
            background: #20C997;
            color: #fff;
        }

        .avatar-green {
            background: #28A745;
            color: #fff;
        }

        .avatar-red {
            background: #DC3545;
            color: #fff;
        }

        .avatar-purple {
            background: #6F42C1;
            color: #fff;
        }

        .avatar-blue {
            background: #0D6EFD;
            color: #fff;
        }

        .avatar-orange {
            background: #FD7E14;
            color: #fff;
        }

        .avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: .75rem;
        }

        .modal-body {
            font-size: .875rem;
        }

        .contact-item {
            border: none !important;
            padding-left: 0;
            padding-right: 0;
        }

        @media (max-width:992px) {
            #chatApp {
                position: relative;
                overflow: hidden;
            }

            .chat-list {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 10;
                background: white;
                transition: transform .3s ease;
            }

            .chat-list.hidden {
                transform: translateX(-100%);
            }

            .chat-window-wrapper {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 20;
                background: white;
                display: none;
            }

            .chat-window-wrapper.active {
                display: flex;
            }

            .back-btn-mobile {
                display: block !important;
            }
        }

        @media (min-width:993px) {

            .chat-list,
            .chat-window-wrapper {
                position: static !important;
                transform: none !important;
            }

            .back-btn-mobile {
                display: none !important;
            }
        }

        .back-btn-mobile {
            display: none;
        }

        .app-container {
            height: calc(100vh - 140px);
        }