.ca-button-pos-floating-left,.ca-button-pos-floating-right {
    bottom: var(--ca-button-bottom);
    z-index: 9999;
    position: fixed
}

:root {
    --ca-button-size: 50px;
    --ca-button-bottom: 20px;
    --ca-button-side: 20px;
    --ca-interface-width: 300px;
    --ca-interface-height: 50%;
}

#chatgpt_assistant_button {
    /* width: var(--ca-button-size); */
    /* height: var(--ca-button-size); */
    /* border-radius: 50%; */
    /* background-color: #007bff; */
    /* color: #fff; */
    /* font-size: 24px; */
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* transition: .3s; */
    /* cursor: pointer; */
}

#chatgpt_assistant_button:hover {
    background-color: #3498db
}

.ca-button-pos-floating-right {
    right: var(--ca-button-side)
}

.ca-button-pos-floating-left {
    left: var(--ca-button-side)
}

#chatgpt_assistant_interface {
    width: 100%;
    display: none;
    position: fixed;
    bottom: calc(var(--ca-button-size) + var(--ca-button-bottom) + 10px);
    /* right: var(--ca-button-side); */
    /* width:var(--ca-interface-width); */
    /* max-width:calc(90% - var(--ca-button-side) - var(--ca-button-side)); */
    height: var(--ca-interface-height);
    max-height: calc(80% - var(--ca-button-size) - var(--ca-button-bottom));
    background-color: #ffffff3d;
    /* border:1px solid #ccc; */
    /* overflow:hidden; */
    z-index: 99999;
    box-shadow: blue !important;
    background-height: 100%;
    /* top: 14%; */
    padding: 233px 47px 500px 0px;
}

.ca-button-pos-inline+#chatgpt_assistant_interface {
    position: static
}

.ca-button-pos-floating-left+#chatgpt_assistant_interface {
    right: initial;
    left: var(--ca-button-side)
}

.chatgpt_assistant_wrapper .conversation-container {
    padding: 10px;
    overflow-y: auto;
    flex: 1 0 0
}

.chatgpt_assistant_interface_wrapper {
    display: flex;
    flex-flow: row;
    height: 100%!important
}

.chatgpt_assistant_wrapper .conversation-container .message_wrapper {
    margin-bottom: 10px
}

.chatgpt_assistant_wrapper .conversation-container .message {
    padding: 5px 10px;
    border-radius: 5px;
    float: left
}

.chatgpt_assistant_wrapper .conversation-container .message_wrapper::after {
    display: block;
    clear: both;
    content: ""
}

.chatgpt_assistant_wrapper .conversation-container .sent-message {
    background-color: #007bff;
    color: #fff;
    float: right
}

.chatgpt_assistant_wrapper .conversation-container .pending-message,.chatgpt_assistant_wrapper .conversation-container .received-message {
    background-color: #f1f1f1;
    color: #333;
    float: left
}

.chatgpt_assistant_wrapper .conversation-container .error-message {
    background-color: #c62828;
    color: #fff;
    float: left
}

.chatgpt_assistant_wrapper .conversation-container .warning-message {
    background-color: #ff5722;
    color: #fff
}

.chatgpt_assistant_wrapper .conversation-container .error-message p,.chatgpt_assistant_wrapper .conversation-container .warning-message p {
    margin: 0
}

.chatgpt_assistant_wrapper .input-container {
    padding: 10px;
    /* border-top: 1px solid #ccc; */
    display: flex;
    flex-flow: column;
    gap: .5em
}

.chatgpt_assistant_wrapper .input-container input {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 5px
}

.chatgpt_assistant_wrapper .input-container button {
    width: 9% !important;
    z-index: 999999;
}

@media(min-width: 500px) {
    .chatgpt_assistant_wrapper .input-container {
        flex-flow:row;
        gap: 0
    }

    .chatgpt_assistant_wrapper .input-container input {
        margin: 0;
        borderradius: 0!important;
        /* border-bottom-right-radius:0!important; */
        border-radius: 27px !important;
        margin-right: -99px !important;
        padding: 25px;
    }

    .chatgpt_assistant_wrapper .input-container button {
        border-top-left-radius: 0!important;
        border-bottom-left-radius: 0!important;
        width: inherit
    }
}

.ca-dot-typing-wrapper {
    width: 21px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

.ca-dot-typing {
    position: relative;
    left: -9999px;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background-color: #333;
    color: #333;
    box-shadow: 9991px 0 0 0 #333,9999px 0 0 0 #333,10007px 0 0 0 #333;
    animation: 3.75s linear infinite ca-dot-typing
}

@keyframes ca-dot-typing {
    0%,100%,11.111%,22.222%,33.333%,44.444%,55.555%,66.667% {
        box-shadow: 9991px 0 0 0 #333,9999px 0 0 0 #333,10007px 0 0 0 #333
    }

    38.887%,5.555% {
        box-shadow: 9991px -5px 0 0 #333,9999px 0 0 0 #333,10007px 0 0 0 #333
    }

    16.667%,50% {
        box-shadow: 9991px 0 0 0 #333,9999px -5px 0 0 #333,10007px 0 0 0 #333
    }

    27.777%,61.107% {
        box-shadow: 9991px 0 0 0 #333,9999px 0 0 0 #333,10007px -5px 0 0 #333
    }
}