.chat-container2 {
    max-width: 600px;
    margin: 80px auto;
    height: 450px;
    padding: 20px;
}
.chat-container2 {
    overflow-y: auto; /* 스크롤 기능은 유지 */
    scrollbar-width: none; /* Firefox에서 스크롤바 감추기 */
    -ms-overflow-style: none; /* IE와 Edge에서 스크롤바 감추기 */
}

.chat-container2::-webkit-scrollbar {
    display: none; /* Chrome, Safari에서 스크롤바 감추기 */
}
.chat-message-list {
    list-style-type: none;
    padding: 0;
}
.message-left, .message-right {
    margin-bottom: 15px;
    clear: both;
}
.message-left {
    float: left;
    background:#CECECE;
    color:#000;
    font-size:12px;
    position:relative;
    font-weight:600 !important;
    padding:10px;
    margin-left:60px;
    border-radius:10px;
    line-height:15px;
    max-width:70%;
    min-height:50px;
}
.message-left:before{
    content: "";
    background: url(/barit/images/chat-avata.png);
    width: 54px;
    height: 54px;
    background-size: cover;
    border-radius: 50%;
    position: absolute;
    left: -60px;

    top:0;
}

.message-right {
    float: right;
    background:#7B39ED;
    color:#fff;
    font-size:12px;
    min-height:50px;
    font-weight:600 !important;
    padding:10px;
    border-radius:10px;
    line-height:15px;
    min-height:50px;
}
.messageinner-left, .messageinner-right {
    background-color: #e6e6e6;
    padding: 10px 15px;
    border-radius: 20px;
    max-width: 70%;
    min-height:50px;
    display: inline-block;
}
.message-right .messageinner-right {
    background-color: #0084ff;
    color: white;
}
.chat-image {
    max-width: 100%;
    border-radius: 10px;
}
.spinner2 {
    text-align: center;
}

.spinner2 {
    height:30px !important;}
.spinner2 > div {
    width: 12px;
    position:relative;
    height: 12px;
    border-radius: 50%;
    background:#fff;
    display: inline-block;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner2 .bounce1 {
    animation-delay: -0.32s;
}
.spinner2 .bounce2 {
    animation-delay: -0.16s;
}
@keyframes sk-bouncedelay {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}
@keyframes expand-width {
    from { width: 25px; }
    to { width: auto; }
}
.message-expanding {
    animation: expand-width 0.5s ease-out forwards;
    overflow: hidden;
    white-space: nowrap;
}
.message-text {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}
.message-text.show {
    opacity: 1;
}
@keyframes expand-width {
    from { max-width: 25px; }
    to { max-width: 70%; }
}
.message-expanding {
    animation: expand-width 0.5s ease-out forwards;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
}








.chat-container3 {

    margin: 0px auto;
    height: 350px;
    max-width:240px;
    width:240px;
    position:absolute;
    top:50%;
    left:50%;
    padding:0 15px;

    transform: translate(-50%, -50%);
}
.chat-container3 {
    overflow-y: auto; /* 스크롤 기능은 유지 */
    scrollbar-width: none; /* Firefox에서 스크롤바 감추기 */
    -ms-overflow-style: none; /* IE와 Edge에서 스크롤바 감추기 */
}

.chat-container3::-webkit-scrollbar {
    display: none; /* Chrome, Safari에서 스크롤바 감추기 */
}
.chat-message-list3 {
    list-style-type: none;
    padding: 0;
}
.message-left3, .message-right3 {
    margin-bottom: 15px;
    clear: both;
}
.message-left3 {
    float: left;
    background:rgba(0, 0, 0, 0.05);
    color:#000;
    font-size:12px;
    position:relative;
    font-weight:600 !important;
    padding:10px;
    margin-left:0px;
    border-radius:10px;
    line-height:15px;
    max-width:80%;
    min-height:50px;
}
.message-left3:before{
    content: "";
    background: url(/barit/images/chat-avata.png);
    width: 24px;
    height: 24px;
    background-size: cover;
    border-radius: 50%;
    position: absolute;
    left: -30px;

    top:0;
}
.mss1 {padding:0 !important; }

.mss7,.mss5,.mss3 {background:#CECECE; padding:0; border:1px solid #eee;}
.message-right3 {
    float: right;
    background:#7B39ED;
    color:#fff;
    font-size:12px;
    min-height:50px;
    font-weight:600 !important;
    padding:10px;
    border-radius:10px;
    line-height:15px;
    min-height:50px;
}
.messageinner3-left, .messageinner3-right {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 10px 15px;
    border-radius: 20px;
    max-width: 80%;
    min-height:50px;
    display: inline-block;
}
.message-right3 .messageinne3r-right {
    background-color: #0084ff;
    color: white;
}
.chat-image {
    max-width: 100%;
    border-radius: 10px;
}
.spinner3 {
    text-align: center;
}

.spinner3 {
    height:30px !important;}
.spinner3 > div {
    width: 8px;
    margin-top:10px;
    position:relative;
    height: 8px;
    border-radius: 50%;
    background:#fff;
    display: inline-block;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner3 .bounce1 {
    animation-delay: -0.32s;
}
.spinner3 .bounce2 {
    animation-delay: -0.16s;
}
@keyframes sk-bouncedelay {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}
@keyframes expand-width {
    from { width: 25px; }
    to { width: auto; }
}
.message-expanding {
    animation: expand-width 0.5s ease-out forwards;
    overflow: hidden;
    white-space: nowrap;
}
.message-text {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}
.message-text.show {
    opacity: 1;
}
@keyframes expand-width {
    from { max-width: 25px; }
    to { max-width: 70%; }
}
.message-expanding {
    animation: expand-width 0.5s ease-out forwards;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
}