/* Start custom CSS for shortcode, class: .elementor-element-c57b708 */body{
    background:#f3f6fb;
    font-family:system-ui, Arial;
}

/* main wrapper */
.chat-wrapper{
    max-width:900px;
    margin:40px auto;
    background:#fff;
    border-radius:18px;
    box-shadow:0 12px 35px rgba(0,0,0,0.08);
    overflow:hidden;
}

/* header */
.chat-wrapper h2{
    background:linear-gradient(135deg,#1dbf73,#18a865);
    color:#fff;
    margin:0;
    padding:18px 22px;
    font-size:18px;
}

/* chat area */
.msg{
    padding:12px 16px;
    margin:12px 18px;
    border-radius:14px;
    max-width:70%;
    position:relative;
    word-wrap:break-word;
    line-height:1.4;
    animation:fadeIn 0.2s ease-in;
    font-size:14px;
}

/* USER bubble */
.msg.user{
    background:#dff3ff;
    margin-left:auto;
    text-align:right;
    border-bottom-right-radius:4px;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

/* ADMIN bubble */
.msg.admin{
    background:#e9f9ee;
    margin-right:auto;
    text-align:left;
    border-bottom-left-radius:4px;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

/* time */
.msg small{
    display:block;
    font-size:11px;
    opacity:0.6;
    margin-top:5px;
}

/* reply form */
.reply-form{
    padding:15px;
    border-top:1px solid #eee;
    background:#fafafa;
    display:flex;
    flex-direction:column;
    gap:10px;
}

/* textarea */
.reply-form textarea{
    width:100%;
    min-height:90px;
    padding:12px;
    border:1px solid #ddd;
    border-radius:12px;
    font-size:14px;
    resize:none;
    transition:0.2s;
    background:#fff;
}

.reply-form textarea:focus{
    outline:none;
    border-color:#1dbf73;
    box-shadow:0 0 0 3px rgba(29,191,115,0.15);
}

/* button */
.reply-form button{
    align-self:flex-end;
    background:#1dbf73;
    color:#fff;
    border:none;
    padding:10px 18px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    transition:0.2s;
}

.reply-form button:hover{
    background:#17a864;
    transform:translateY(-1px);
}

/* animation */
@keyframes fadeIn{
    from{opacity:0; transform:translateY(6px);}
    to{opacity:1; transform:translateY(0);}
}

/* mobile */
@media(max-width:600px){
    .chat-wrapper{
        margin:15px;
        border-radius:12px;
    }

    .msg{
        max-width:85%;
        margin:10px;
    }
}/* End custom CSS */