.modal.chat{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.78);
        justify-content: center;
        align-items: center;
        z-index: 100;

        & > .modal-content.chat{
            display: flex;
            flex-direction: column;
            width: 70%;
            height: 90vh;
            align-items: center;
            color: black;
            background-color: #ECF0F1 ;
            justify-content: center;
            transition:  0.1s ease;
            overflow: hidden;
            border-radius: 8px;

            & > .closeChat {
                display: inline-flex;
                align-self: flex-end;
                color: rgb(53, 52, 52);
                font-size: 2rem;
                cursor: pointer;
                padding-right: 10px;
                position: absolute;
                top: 0;
                font-size: 30px;
                line-height: 1;

                &:hover{
                    color: rgb(116, 115, 115);
                }
            }

            & > form{
                display: flex;
                height: 98%;
                width: 100%;

            & > .chatContent{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                height: 100%;
                width: 100%;
                gap: 10px;
                padding-left: 10px;
                overflow: hidden;

                & > .leftContainer{
                    display: flex;
                    height: 99%;
                    width: 30%;
                    flex-direction: column;
                    /* box-shadow: 0px 2px 20px rgba(139, 139, 139, 0.775); */
                    border-radius: 10px;
                    overflow: hidden;
                    justify-content: flex-start;
                    align-items: flex-start;
                            border: 1px solid #ccc;

                    & > .nameHolder{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        padding: 10px;
                        gap: 6px;
                        background-color: #dbdcdd9b;
                        height: 10vh;
                        width: 100%;
                            border: 1px solid #ccc;

                        & > span{
                            height: 3rem;
                            width: 3rem;
                            background-color: rgba(183, 182, 182, 0.545);
                            border-radius: 50px;
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            & > i{
                                font-size: 20px;
                            }
                        }

                        & > .name{
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            align-items: flex-start;

                            & > p{
                                margin: 0;
                                font-size: 16px;
                                font-family: "Stack Sans Headline", sans-serif;
                                font-weight: 600;
                            }
                            
                            & p:nth-child(2){
                                color: rgb(98, 98, 98);
                                font-size: 13px;
                                font-weight: 600;
                            }

                        }
                    }

                    & > .historyContainer{
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-start;
                        align-items: center;
                        padding: 10px 0px;
                        /* box-shadow: 0px 0px 10px black; */
                        overflow: auto;
                        gap: 10px;
                        width: 100%;
                        background-color: whitesmoke;
                        height: 89%;
 
                        &::-webkit-scrollbar{
                            display: none;
                        }

                        & > p{
                            margin: 0;
                            font-size: 17px;
                            font-family: "Stack Sans Headline", sans-serif;
                            font-weight: 600;
                            width: 94%;
                        }
                    
                        & > p:nth-child(2){
                            margin: 0;
                            font-size: 14px;
                            font-family: "Stack Sans Text", sans-serif;
                            font-weight: 300;
                            width: 94%;
                            color: rgb(98, 98, 98);

                        }
                        & > .message{
                            display: flex;
                            flex-direction: column;
                            background-color: white;
                            width: 95%;
                            border-radius: 8px;
                            padding: 10px;
                            box-shadow: 0px 0px 3px rgb(198, 198, 198);
                            cursor: pointer;

                            & > p{
                                margin: 0;
                                font-size: 14px;
                                font-family: "Stack Sans Headline", sans-serif;
                                font-weight: 600;

                                &:last-child{
                                    font-family: "Stack Sans Text", sans-serif;
                                    font-size: 12px;
                                    font-weight: 200;
                                    color: rgba(72, 72, 72, 0.763);
                                }
                            }
                        }
                        
                        & > .message.selected {
                            background-color: #ECF0F1;
                            border-left: 4px solid #2C3E50;
                        }


                        & > .message.active{
                            background-color: rgb(220, 218, 218);
                        }
                    }
                }

                & > .noConvo{
                    display: none;
                    display: flex;
                    width: 65%;
                    height: 99%;
                    flex-direction: column;
                    border-radius: 10px;
                    overflow: hidden;
                    border: 1px solid #ccc;
                    justify-content: center;
                    align-items: center;
                    background-color: rgba(198, 197, 197, 0.267);

                    & > p{
                        font-family: "Stack Sans Text", sans-serif;
                        font-size: 14px;
                        font-weight: 400;
                        color: gray;
                    }
                }

                & > .rightContainer{
                    display: flex;
                    width: 65%;
                    height: 99%;
                    flex-direction: column;
                    /* box-shadow: 0px 2px 20px rgba(139, 139, 139, 0.775); */
                    border-radius: 10px;
                    overflow: hidden;
                            border: 1px solid #ccc;

                    & > .chat-header{
                        background-color: #2C3E50;
                        color: white;
                        display: flex;
                        flex-direction: row;
                        gap: 5px;
                        justify-content:space-between;
                        align-items: center;
                        height: 8vh;
                        padding: 0px 15px;
                        width: 100%;
                        /* border-bottom: 1px solid rgba(198, 196, 196, 0.354); */
                        box-shadow: 0px 2px 2px rgba(150, 150, 150, 0.283);
                        z-index: 1;

                        & > .chatName{
                            display: flex;
                            flex-direction: row;
                            gap: 5px;
                            justify-content: center;
                            align-items: center;
                            font-family: "Stack Sans Text", sans-serif;
                        }

                        & > .linkHolder{
                            display: flex;
                            flex-direction: row;
                            justify-content: center;
                            align-items: center;

                            & > a{
                                text-decoration: none;
                                color: #ECF0F1;
                                font-size: 14px;
                                font-family: "Stack Sans Text", sans-serif;
                                font-weight: 300;
                            }
                        }

                    }
                    /* Messages */
                    & > .chat-box {
                        flex: 1;
                        padding: 15px;
                        overflow-y: auto;
                        display: flex;
                        flex-direction: column;
                        gap: 10px;
                        background: whitesmoke;

                        &::-webkit-scrollbar{
                            display: none;
                        }

                        & > .chat-day{
                            display: flex;
                            font-family: "Stack Sans Text", sans-serif;
                            width: 100%;
                            justify-content: center;
                            align-items: center;
                            font-size: 14px;
                        }
                        
                        /* Message bubbles */
                        & > .message {
                            max-width: 70%;
                            padding: 7px 14px;
                            border-radius: 10px;
                            font-size: 14px;
                            word-wrap: break-word;
                            display: flex;
                            font-family: "Stack Sans Text", sans-serif;
                            font-weight: 300;

                        }
    
                        /* User message (right side) */
                        & >.message.user {
                            align-self: flex-end;
                            background: #2C3E50;
                            color: white;
                            border-bottom-right-radius: 4px;
                        }
                        
                        /* Shop message (left side) */
                        & > .message.shop {
                            align-self: flex-start;
                            background: #e4e6eb;
                            color: #333;
                            border-bottom-left-radius: 4px;
                        }
                    }

                    /* Input area */
                    & > .chat-input {
                        display: flex;
                        padding: 10px;
                        border-top: 1px solid #ddd;
                        background: white;
                        height: 10vh;
                        width: 100%;
                        gap: 10px;
        
                        & > input {
                            flex: 1;
                            padding: 10px;
                            border-radius: 10px;
                            border: 1px solid #ccc;
                            outline: none;
                        }
                        
                        & > button {
                            padding: 7px 16px;
                            border: none;
                            border-radius: 10px;
                            background-color: #2C3E50;
                            color: white;
                            cursor: pointer;
                            transition: 0.2s;

                            &:hover {
                                background-color: #4b6c8d;
                            }
                        }
                    }
                }
            }
            }

        }
    }


    .shop-indicator {
    display: inline-block;
    width: 9px;
    height: 9px;
    background-color: rgb(var(--bs-primary-rgb));
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}