﻿
@keyframes cw-buzz-shake {
  0%,100%{transform:translate(0)}
  15%,45%,75%{transform:translate(-5px,0) rotate(-1deg)}
  30%,60%,90%{transform:translate(5px,0) rotate(1deg)}
}
.cw-buzzing { animation: cw-buzz-shake 0.5s ease-in-out; }
@keyframes cwDotBlink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.4; }
}
@keyframes cwBotDotW { 0%,80%,100%{transform:scale(.5);opacity:.3} 40%{transform:scale(1);opacity:1} }
.cw-bot-dot-w { width:7px;height:7px;border-radius:50%;background:#7c3aed;display:inline-block;margin:0 2px;animation:cwBotDotW 1.2s infinite ease-in-out; }

/* ── Mobile: full screen ───────────────────────────────────── */
@media (max-width: 600px) {
    /* Layout chung — KHÔNG đặt display ở đây để JS Toggle() hoạt động */
    #chat-widget {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    /* display:flex chỉ khi body có class cw-open — Toggle() add/remove class này */
    body.cw-open #chat-widget {
        display: flex !important;
    }
    /* Header xanh cố định — KHÔNG co giãn */
    #chat-widget > div:first-child {
        flex-shrink: 0 !important;
    }
    /* Welcome screen: scroll khi nội dung quá dài
       Chỉ áp dụng khi đang hiện (không có display:none) */
    #chatWelcome:not([style*="display: none"]):not([style*="display:none"]) {
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 14px !important;
    }
    /* Pre-form cũng scroll */
    #chatPreForm:not([style*="display: none"]):not([style*="display:none"]) {
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    /* chatBox (subheader + messages + input) flex column
       KHÔNG dùng display:flex !important — JS sẽ set display khi cần
       Chỉ override flex/height để fill đúng khi đang hiển thị */
    #chatBox[style*="flex"] {
        flex: 1 !important;
        min-height: 0 !important;
        flex-direction: column !important;
    }
    /* Vùng tin nhắn chiếm phần còn lại */
    #cwMsgArea {
        height: auto !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    /* Input bar cố định đáy */
    #chatBox > div:last-child {
        flex-shrink: 0 !important;
    }
    /* Ẩn nút bubble khi widget đang mở */
    body.cw-open #chat-bubble {
        display: none !important;
    }
}

#chatWelcome{max-height:calc(100dvh - 255px);overflow-y:auto}.cw-contact-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #e0e0e0;border-radius:8px;color:#333;margin-top:8px;text-decoration:none}.cw-contact-link>i:first-child{width:32px;height:32px;background:#27ae60;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.cw-contact-link span{flex:1}.cw-contact-link small{display:block;font-size:11px;color:#999}.cw-contact-link>i:last-child{color:#ccc}

@media(max-width:600px){#chat-bubble{bottom:calc(88px + env(safe-area-inset-bottom))!important;right:16px!important;width:50px!important;height:50px!important}}
