/* ════════════════════════════════
   WHATSAPP STYLE CHAT
════════════════════════════════ */

.chat-wrapper{
    max-width:700px;
    margin:0 auto;

    background:#efeae2;

    border-radius:16px;
    overflow:hidden;

    box-shadow:
        0 4px 20px rgba(0,0,0,.08);
}

.highlight-query{
    color:#008069;
    font-weight:700;
}

.contact-actions{
    display:inline-flex;
    margin-left:6px;
}

.message-bubble ul {
    margin: 8px 0 8px 20px;
    padding-left: 20px;
    list-style: disc;
}

.message-bubble li {
    margin: 4px 0;
}

/* ════════════════════════════════
   HEADER
════════════════════════════════ */

.chat-header{
    display:flex;
    align-items:center;
    gap:12px;

    padding:12px 16px;

    background:#008069;
    color:#fff;
}

.chat-header-icon{
    width:42px;
    height:42px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.2);

    font-size:1rem;
}

.chat-header-info h5{
    margin:0;
    font-size:.95rem;
    font-weight:600;
}

.chat-header-info small{
    display:block;
    margin-top:2px;
    opacity:.85;
    font-size:.75rem;
}

.chat-header-info small{
    transition:.25s;
}

/* ════════════════════════════════
   CHAT BODY
════════════════════════════════ */

.chat-messages{
    max-height:450px;
    height:450px;

    padding:12px;

     background:url("../images/wa-bg.png") repeat, #efeae2;

    display:flex;
    flex-direction:column;
    gap:15px;

    overflow-y:auto;
    
    scrollbar-width:none;      /* Firefox */
    -ms-overflow-style:none;   /* IE & Edge lama */
}

.chat-messages::-webkit-scrollbar{
    display:none;              /* Chrome, Edge, Safari */
}

.feedback-yes{
    background:linear-gradient(135deg,#00a884,#008069);
}

.feedback-yes:hover{
    background:#008069;
}

.feedback-no{
    background:#667781;
}

.feedback-no:hover{
    background:#55636d;
}

/* ════════════════════════════════
   MESSAGE
════════════════════════════════ */

.message{
    display:flex;
    width:100%;
    animation:msgIn .20s ease-out;
}

@keyframes msgIn{

    from{
        opacity:0;
        transform:translateY(12px) scale(.98);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

.message.bot{
    justify-content:flex-start;
}

.message.user{
    justify-content:flex-end;
}

.message-bubble{
    position:relative;

    max-width:82%;
    width:fit-content;

    padding:8px 65px 18px 12px;

    font-size:.92rem;
    line-height:1.45;

    word-break:break-word;
}

.msg-check{
    margin-left:3px;
    font-size:11px;
    color:#53bdeb;
}

.chat-date{

    align-self:center;

    background:#fff3c4;

    color:#54656f;

    font-size:12px;

    padding:5px 10px;

    border-radius:6px;

    margin:12px 0;
}

/* ════════════════════════════════
   BOT MESSAGE
════════════════════════════════ */

.message.bot .message-bubble{
    background:#ffffff;
    
    line-height: 1.6;
    
    color:#111827;

    border-radius:
        0
        8px
        8px
        8px;

    box-shadow:
        0 1px 1px rgba(0,0,0,.12);
}

.message.bot .message-bubble::before{
    content:"";

    position:absolute;

    top:0;
    left:-8px;

    width:0;
    height:0;

    border-top:8px solid #ffffff;
    border-left:8px solid transparent;
}

/* ════════════════════════════════
   USER MESSAGE
════════════════════════════════ */

.message.user .message-bubble{
    background:#d9fdd3;
    
    line-height: 1.6;

    color:#111827;

    border-radius:
        8px
        0
        8px
        8px;

    box-shadow:
        0 1px 1px rgba(0,0,0,.12);
}

.message.user .message-bubble::before{
    content:"";

    position:absolute;

    top:0;
    right:-8px;

    width:0;
    height:0;

    border-top:8px solid #d9fdd3;
    border-right:8px solid transparent;
}

/* ════════════════════════════════
   TIME
════════════════════════════════ */

.msg-time{
    position:absolute;

    right:10px;
    bottom:5px;

    font-size:11px;

    color:#667781;
}

/* ════════════════════════════════
   TYPING
════════════════════════════════ */

.typing-bubble{
    display:flex;
    align-items:flex-end;
    justify-content:center;

    gap:5px;

    min-width:52px;

    padding:14px 16px 12px !important;
}

.typing-bubble span{
    width:8px;
    height:8px;

    border-radius:50%;

    background:#8696a0;

    animation:typingBounce 1.2s infinite;
}

.typing-bubble span:nth-child(2){
    animation-delay:.2s;
}

.typing-bubble span:nth-child(3){
    animation-delay:.4s;
}

@keyframes typingBounce{

    0%,80%,100%{
        transform:translateY(2px);
        opacity:.45;
    }

    40%{
        transform:translateY(-4px);
        opacity:1;
    }

}

/* ════════════════════════════════
   QUICK BUTTONS
════════════════════════════════ */

.quick-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin-top:8px;
}

.quick-btn{

    border:none;

    background:linear-gradient(
        135deg,
        #00a884,
        #008069
    );
    color:#fff;
    
    box-shadow: 0 2px 8px rgba(0,168,132,.25);

    padding:8px 14px;

    border-radius:18px;

    font-size:.85rem;
    font-weight:500;
    will-change: transform;
    cursor:pointer;

    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.quick-btn2{

    border:none;

    background:linear-gradient(
        135deg,
        #00a884,
        #008069
    );
    color:#fff;
    
    box-shadow: 0 2px 8px rgba(0,168,132,.25);

    padding:4px 7px;

    border-radius:18px;

    font-size:.85rem;
    font-weight:500;
    will-change: transform;
    cursor:pointer;

    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.quick-btn:hover{

    background:#008069;

    color:#fff;

    transform: translateY(-1px) scale(1.05);
    
    box-shadow: 0 4px 14px rgba(0,168,132,.35);
}

/* ════════════════════════════════
   INPUT AREA
════════════════════════════════ */

.chat-input{
    display:flex;
    align-items:center;
    gap:8px;

    padding:15px;

    background:#f0f2f5;
    
    border-top:1px solid rgba(0,0,0,.05);
}

.chat-input input{
    flex:1;

    height:44px;

    border:none;
    outline:none;

    background:#fff;

    border-radius:24px;

    padding:0 16px;

    font-size:.95rem;
    
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.chat-input input:focus{
    box-shadow:0 0 0 2px rgba(0,168,132,.15);
}

#sendMessageBtn{
    width:44px;
    height:44px;

    border:none;
    border-radius:50%;

    background:#00a884;

    color:#fff;

    cursor:pointer;

    font-size:1rem;
}

#sendMessageBtn:hover{
    transform:scale(1.05);
}

.quick-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
    pointer-events:none;
}

.restart-chat-btn{

    width:100%;
    height:46px;

    border:none;
    border-radius:24px;

    background:linear-gradient(135deg,#00a884,#008069);

    color:#fff;

    font-size:.95rem;
    font-weight:600;

    cursor:pointer;

    transition:.2s;
}

.restart-chat-btn:hover{
    transform:translateY(-1px);
}

.chat-input-area{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
}

.feedback-input-btn{

    flex:1;

    height:44px;

    border:none;
    border-radius:24px;

    background:linear-gradient(
        135deg,
        #00a884,
        #008069
    );

    color:#fff;

    font-size:.9rem;
    font-weight:600;

    cursor:pointer;

    transition:.2s;
}

.feedback-input-btn:hover{
    transform:translateY(-1px);
}

/* ════════════════════════════════
   MOBILE
════════════════════════════════ */

@media(max-width:768px){

    .chat-wrapper{
        border-radius:0;
        max-width:100%;
    }

    .chat-messages{
        min-height:60vh;
    }

    .message-bubble{
        max-width:88%;
    }

}